<!--
  ~ Copyright (C) 2019 Robert Bosch GmbH Copyright (C) 2019 Robert Bosch Manufacturing Solutions GmbH, Germany. All rights reserved.
  -->

<bci-modal-component [title]="messagesIntl.title">
  <bci-commandbar
    [itemCount]="(dataSource | async)!.data.length"
    [selectedItemCount]="selection.selected.length"
    (search)="search($event)"
    [showFilter]="false"
    [filterCount]="(filters | async)!.length > 0 ? 1 : 0"
    (clickFilter)="filter()"
  >
    <bci-commandbar-inlinefilters>
      <bci-commandbar-inlinefilter>
        <bci-select
          multiple
          [placeholder]="messagesIntl.typeFilter"
          [required]="false"
          (selectionChange)="typeSelect($event.value)"
        >
          <mat-option [value]="'information'">
            {{ messagesIntl.information }}
          </mat-option>
          <mat-option [value]="'success'">
            {{ messagesIntl.success }}
          </mat-option>
          <mat-option [value]="'warning'">
            {{ messagesIntl.warning }}
          </mat-option>
          <mat-option [value]="'error'">
            {{ messagesIntl.error }}
          </mat-option>
        </bci-select>
      </bci-commandbar-inlinefilter>
    </bci-commandbar-inlinefilters>
    <bci-commandbar-actions [renderLargeInlinedItemVariants]="false">
      <bci-commandbar-button
        bciCommandbarActionDelete
        [attr.aria-label]="messagesIntl.delete"
        [tooltip]="selection.selected.length > 0 ? messagesIntl.deleteSelected : messagesIntl.deleteAll"
        (click)="deleteMessages()"
      >
        {{ messagesIntl.delete }}
      </bci-commandbar-button>
    </bci-commandbar-actions>
  </bci-commandbar>

  <mat-table #table [dataSource]="dataSource | async">
    <ng-container matColumnDef="expand">
      <mat-header-cell *matHeaderCellDef></mat-header-cell>
      <mat-cell *matCellDef="let element">
        <mat-icon
          *ngIf="element.messageDetails"
          fontIcon="Bosch-Ic-arrow-expand-right"
          [@indicatorRotate]="getExpandedState(element)"
          class="expand-icon"
        ></mat-icon>
      </mat-cell>
    </ng-container>

    <ng-container matColumnDef="date">
      <mat-header-cell *matHeaderCellDef>{{ messagesIntl.date }}</mat-header-cell>
      <mat-cell *matCellDef="let element">
        <p>{{ element.date | date: 'dd.MM.yy / HH:mm' }}</p>
      </mat-cell>
    </ng-container>

    <ng-container matColumnDef="type">
      <mat-header-cell *matHeaderCellDef>{{ messagesIntl.type }}</mat-header-cell>
      <mat-cell *matCellDef="let element">
        <p *ngIf="element.type === 'success'">Success</p>
        <p *ngIf="element.type === 'information'">Information</p>
        <p *ngIf="element.type === 'warning'">Warning</p>
        <p *ngIf="element.type === 'error'">Error</p>
      </mat-cell>
    </ng-container>

    <ng-container matColumnDef="message">
      <mat-header-cell *matHeaderCellDef>{{ messagesIntl.message }}</mat-header-cell>
      <mat-cell *matCellDef="let element" class="cdk-messages-inline-cell">
        <p>{{ element.message }}</p>
        <p *ngIf="selection.selected.indexOf(element) > -1">{{ element.messageDetails }}</p>
      </mat-cell>
    </ng-container>

    <ng-container matColumnDef="goto">
      <mat-header-cell *matHeaderCellDef>{{ messagesIntl.goTo }}</mat-header-cell>
      <mat-cell *matCellDef="let element">
        <button class="goto-button" mat-icon-button tabindex="-1" *ngIf="element.link" (click)="goTo(element.link)">
          <i class="Bosch-Ic Bosch-Ic-arrow-right-circle"></i>
        </button>
      </mat-cell>
    </ng-container>

    <ng-container matColumnDef="noData">
      <div mat-footer-cell *matFooterCellDef colspan="2">
        {{ messagesIntl.noData }}
      </div>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
    <mat-row
      *matRowDef="let row; columns: displayedColumns"
      (click)="selection.toggle(row)"
      [class.selected]="selection.isSelected(row)"
    ></mat-row>
    <mat-footer-row
      *matFooterRowDef="['noData']"
      [class.hide]="(dataSource | async)!.data.length !== 0"
    ></mat-footer-row>
  </mat-table>
</bci-modal-component>
