import { DatePipe, NgIf } from '@angular/common';
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { MatDividerModule } from '@angular/material/divider';
import { MatIconModule } from '@angular/material/icon';
import { MatTabsModule } from '@angular/material/tabs';
import { Tour } from '../../../core/data-access/graphql/generated/generated';

@Component({
    changeDetection: ChangeDetectionStrategy.OnPush,
    selector: 'dks-accounting-tour-overview',
    template: `
    <div class="px-4 py-2 flex justify-between">
      <div class="flex flex-col text-gray-600 text-sm">
        <span class="font-medium">Startzeit</span>
        <span>
          {{ tour.startDate | date : 'dd.MM.yyyy' }}
          {{ tour.startDate | date : 'HH:mm' }} Uhr
        </span>
      </div>
      <div class="flex flex-col text-gray-600 text-sm">
        <span class="font-medium" *ngIf="tour.createdAt">Erstellt am</span>
        <span *ngIf="tour.createdAt">
          {{ tour.createdAt | date : 'dd.MM.yyyy' }}
          {{ tour.createdAt | date : 'HH:mm' }} Uhr
        </span>
      </div>
    </div>
    <mat-divider></mat-divider>
    <div
      class="flex flex-wrap md:flex-nowrap justify-between px-4 py-2"
      *ngIf="tour.driverName || tour.codriverName || tour.carName"
    >
      <div
        class="flex flex-col pb-1 md:pb-0"
        *ngIf="tour.carName"
      >
        <span class="font-semibold pb-1">Fahrzeug</span>
        {{ tour.carName }}
      </div>
      <div
        class="flex flex-col pb-1 md:pb-0"
        *ngIf="tour.driverName"
      >
        <span class="font-semibold pb-1">Fahrer</span>
        <span>{{ tour.driverName }}</span>
      </div>
      <div class="flex flex-col" *ngIf="tour.codriverName">
        <span class="font-semibold pb-1">Beifahrer</span>
        <span>{{ tour.codriverName }}</span>
      </div>
    </div>
    <div class="flex flex-col px-4 py-2">
      <span class="font-semibold pb-1">Patient</span>
      <span>{{ tour.patientName }} {{ tour.patientSurname }}</span>
      <span>{{ tour.patientStreet }}</span>
      <span>{{ tour.patientZip }} {{ tour.patientCity }}</span>
    </div>
    <div class="flex flex-wrap md:flex-nowrap px-4 py-2">
      <div class="w-full md:w-1/2 flex flex-col pb-1 md:pb-0">
        <span class="font-semibold pb-1">Start</span>
        <span>{{ tour.startInstitution }}</span>
        <span>{{ tour.startStreet }}</span>
        <span>{{ tour.startZip }} {{ tour.startCity }}</span>
      </div>
      <div class="w-full md:w-1/2 flex flex-col">
        <span class="font-semibold pb-1">Ziel</span>
        <span>{{ tour.targetInstitution }}</span>
        <span>{{ tour.targetStreet }}</span>
        <span>{{ tour.targetZip }} {{ tour.targetCity }}</span>
      </div>
    </div>
  `,
    styles: [],
    imports: [MatTabsModule, MatIconModule, MatDividerModule, NgIf, DatePipe]
})
export class AccountingTourOverviewComponent {
  @Input() tour!: Tour;
}