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

<bci-page-content>
  <h2 class="page-heading">Table</h2>
  <p>The Table below is used to demostrate the best practice for the responsive behaviour for VP1/2/3.</p>
  <div [ngSwitch]="isMobile$ | async">
    <bci-commandbar [showSearch]="false" [showAdd]="false">
      <bci-commandbar-quickfilters>
        <bci-commandbar-item>
          <mat-slide-toggle style="margin-right: 1em" (click)="toggleContent()" id="emptyTableToggle"
            >Show empty state</mat-slide-toggle
          >
          <mat-slide-toggle style="margin-right: 1em" (click)="toggleStripesDirective()" id="stripesDirectiveToggle"
            >Switch to column stripes</mat-slide-toggle
          >
        </bci-commandbar-item>
      </bci-commandbar-quickfilters>
    </bci-commandbar>

    <p>To use the empty state for tables, use <code>bci-table-container</code>.</p>
    <p *ngIf="enableStripesDirective">
      To use a column striped table, use <code>bciTableStripedColumns</code> directive
    </p>
    <bci-table-container
      [showEmptyState]="dataSource && dataSource.data && dataSource.data.length === 0"
      emptyText="No items to display."
      *ngIf="!enableStripesDirective"
    >
      <mat-table [dataSource]="dataSource" *ngSwitchCase="false">
        <!-- Position Column -->
        <ng-container matColumnDef="position">
          <mat-header-cell *matHeaderCellDef> No.</mat-header-cell>
          <mat-cell *matCellDef="let element"> {{element.position}}</mat-cell>
        </ng-container>

        <!-- Name Column -->
        <ng-container matColumnDef="name">
          <mat-header-cell *matHeaderCellDef> Name</mat-header-cell>
          <mat-cell *matCellDef="let element">
            {{element.name}}
            <ng-container *ngIf="element.name === 'Helium'"><br />Extra line</ng-container>
          </mat-cell>
        </ng-container>

        <!-- Weight Column -->
        <ng-container matColumnDef="weight">
          <mat-header-cell *matHeaderCellDef> Weight</mat-header-cell>
          <mat-cell *matCellDef="let element">
            {{element.weight | noValue}}
            <!-- show placeholder as the weight could be null -->
          </mat-cell>
        </ng-container>

        <!-- Symbol Column -->
        <ng-container matColumnDef="symbol">
          <mat-header-cell *matHeaderCellDef> Symbol</mat-header-cell>
          <mat-cell *matCellDef="let element"> {{element.symbol}}</mat-cell>
        </ng-container>

        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row
          (click)="selection.toggle(row)"
          *matRowDef="let row; columns: displayedColumns;"
          [class.selected]="selection.isSelected(row)"
        ></mat-row>
      </mat-table>
      <div *ngSwitchCase="true">
        <bci-table-card *ngFor="let row of dataSource?.paginatedData || []; trackBy: trackByName">
          <bci-table-card-entry entry-title="Position" [value]="row?.position" slot="content"></bci-table-card-entry>
          <bci-table-card-entry entry-title="Name" [value]="row?.name" slot="content"></bci-table-card-entry>
          <bci-table-card-entry entry-title="Weight" [value]="row?.weight" slot="content"></bci-table-card-entry>
          <bci-table-card-entry entry-title="Symbol" [value]="row?.symbol" slot="content"></bci-table-card-entry>
        </bci-table-card>
      </div>
    </bci-table-container>
    <p></p>
    <bci-table-container
      [showEmptyState]="dataSource && dataSource.data && dataSource.data.length === 0"
      emptyText="No items to display."
      *ngIf="enableStripesDirective"
    >
      <mat-table [dataSource]="dataSource" *ngSwitchCase="false" bciTableStripedColumns>
        <!-- Position Column -->
        <ng-container matColumnDef="position">
          <mat-header-cell *matHeaderCellDef> No.</mat-header-cell>
          <mat-cell *matCellDef="let element"> {{element.position}}</mat-cell>
        </ng-container>

        <!-- Name Column -->
        <ng-container matColumnDef="name">
          <mat-header-cell *matHeaderCellDef> Name</mat-header-cell>
          <mat-cell *matCellDef="let element">
            {{element.name}}
            <ng-container *ngIf="element.name === 'Helium'"><br />Extra line</ng-container>
          </mat-cell>
        </ng-container>

        <!-- Weight Column -->
        <ng-container matColumnDef="weight">
          <mat-header-cell *matHeaderCellDef> Weight</mat-header-cell>
          <mat-cell *matCellDef="let element">
            {{element.weight | noValue}}
            <!-- show placeholder as the weight could be null -->
          </mat-cell>
        </ng-container>

        <!-- Symbol Column -->
        <ng-container matColumnDef="symbol">
          <mat-header-cell *matHeaderCellDef> Symbol</mat-header-cell>
          <mat-cell *matCellDef="let element"> {{element.symbol}}</mat-cell>
        </ng-container>

        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row
          (click)="selection.toggle(row)"
          *matRowDef="let row; columns: displayedColumns;"
          [class.selected]="selection.isSelected(row)"
        ></mat-row>
      </mat-table>
      <div *ngSwitchCase="true">
        <bci-table-card *ngFor="let row of dataSource?.paginatedData || []; trackBy: trackByName">
          <bci-table-card-entry entry-title="Position" [value]="row?.position" slot="content"></bci-table-card-entry>
          <bci-table-card-entry entry-title="Name" [value]="row?.name" slot="content"></bci-table-card-entry>
          <bci-table-card-entry entry-title="Weight" [value]="row?.weight" slot="content"></bci-table-card-entry>
          <bci-table-card-entry entry-title="Symbol" [value]="row?.symbol" slot="content"></bci-table-card-entry>
        </bci-table-card>
      </div>
    </bci-table-container>
  </div>

  <bci-activity-indicator [showLoader]="!dataSource"> </bci-activity-indicator>

  <bci-paginator
    [pageSizeOptions]="[5,10,50]"
    [showPageSizeSelector]="true"
    [length]="dataSource?.numberOfItems || 0"
    [pageIndex]="dataSource?.pageIndex || 0"
    [pageSize]="dataSource?.pageSize || 10"
    [pageSizeOptions]="pageSizeOptions"
    (page)="onPageChange($event.detail)"
  ></bci-paginator>
</bci-page-content>
