import { DatePipe } 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">
        @if (tour.createdAt) {
          <span class="font-medium">Erstellt am</span>
        }
        @if (tour.createdAt) {
          <span>
            {{ tour.createdAt | date : 'dd.MM.yyyy' }}
            {{ tour.createdAt | date : 'HH:mm' }} Uhr
          </span>
        }
      </div>
    </div>
    <mat-divider></mat-divider>
    @if (tour.driverName || tour.codriverName || tour.carName) {
      <div
        class="flex flex-wrap md:flex-nowrap justify-between px-4 py-2"
        >
        @if (tour.carName) {
          <div
            class="flex flex-col pb-1 md:pb-0"
            >
            <span class="font-semibold pb-1">Fahrzeug</span>
            {{ tour.carName }}
          </div>
        }
        @if (tour.driverName) {
          <div
            class="flex flex-col pb-1 md:pb-0"
            >
            <span class="font-semibold pb-1">Fahrer</span>
            <span>{{ tour.driverName }}</span>
          </div>
        }
        @if (tour.codriverName) {
          <div class="flex flex-col">
            <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, DatePipe]
})
export class AccountingTourOverviewComponent {
  @Input() tour!: Tour;
}
