import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-table',
  template: `
      <table >
        <caption>
          <md-progress-bar mode="indeterminate" [ngStyle]="{opacity: loading ? 1 : 0}"></md-progress-bar>
        </caption>
        <thead>
          <tr>
            <th *ngFor="let column of columns">{{column.name}}</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let item of items">
            <td *ngFor="let column of columns" [ngSwitch]="column.type">
              <div *ngSwitchCase="TableCellType.DATE">
                <span [ngClass]="getDataByIdentifiers(item, column.identifiers) ? 'ended'  : 'ongoing'">
                  {{ getDataByIdentifiers(item, column.identifiers) ? (getDataByIdentifiers(item, column.identifiers) | date) : "ongoing" }}
                </span>
              </div>
              <button 
                md-button color="primary" 
                *ngSwitchCase="TableCellType.LINK" 
                [routerLink]="getDataByIdentifiers(item, column.identifiers)">Details</button>
              <div *ngSwitchDefault>{{ getDataByIdentifiers(item, column.identifiers) }}</div>
            </td>
          </tr>
        </tbody>
      </table> 
  `,
  styleUrls: ['./table.component.css']
})
export class TableComponent {
  @Input()
  columns: {
    name: string,
    identifiers: string[],
    type?: TableCellType
   };

  @Input()
  items: Object[];

  @Input()
  loading: boolean;

  TableCellType = TableCellType;

  constructor() { }

  getDataByIdentifiers(object, identifiers) {
     return identifiers.reduce((prev, curr) => !!prev ? prev[curr] : prev, object);
  }

}

export enum TableCellType {
  DATE, LINK
}