import {
  animate,
  state,
  style,
  transition,
  trigger,
} from '@angular/animations';
import { Component, Input, OnChanges, OnInit } from '@angular/core';

@Component({
    selector: 'dks-time-per-tour-by-car',
    templateUrl: './time-per-tour-by-car.component.html',
    styleUrls: ['./time-per-tour-by-car.component.css'],
    animations: [
        trigger('detailExpand', [
            state('collapsed', style({ height: '0px', minHeight: '0' })),
            state('expanded', style({ height: '*' })),
            transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
        ]),
    ],
    standalone: false
})
export class TimePerTourByCarComponent implements OnInit, OnChanges {
  @Input() columns: { id: string; title: string }[] = [];
  @Input() data: any[] = [];

  /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
  displayedColumns: string[] = [];
  expandedCarData = null;

  ngOnInit(): void {
    this.displayedColumns = this.columns.map(({ id }) => id);
  }

  ngOnChanges(): void {
    this.expandedCarData = null;
  }

  getSlotTitleByIndex(idx: number): string {
    return this.columns.find(({ id }) => id === `slot${idx}`)?.title ?? '';
  }

  setExpandedCarData(carData: any): void {
    if(carData.carName !== 'Touren ohne Zuweisung') {
      this.expandedCarData = this.expandedCarData === carData ? null : carData;
    }
  }
}