import { DatePipe, NgFor, NgIf, NgSwitch, NgSwitchCase } from '@angular/common';
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { MatDividerModule } from '@angular/material/divider';
import { MatIconModule } from '@angular/material/icon';
import { MatListModule } from '@angular/material/list';
import { Ticket, TicketValidationState, Tour } from '../../../core/data-access/graphql/generated/generated';

@Component({
    changeDetection: ChangeDetectionStrategy.OnPush,
    selector: 'dks-accounting-tour-ticket',
    template: `
    <div class="grid grid-cols-4">
      <mat-list class="col-span-2" role="list">
        <div mat-subheader class="text-sm">Ticket Informationen</div>
        <mat-list-item role="listitem">
          Status:
          <ng-container [ngSwitch]="tour.ticket.currentState">
            <span
              class="font-bold"
              *ngSwitchCase="TicketValidationState.Created"
              >Touren angenommen
            </span>
            <span
              class="font-bold"
              *ngSwitchCase="TicketValidationState.UserInteractionRequired"
              >Genehmigung / Transportschein
            </span>
            <span
              class="font-bold"
              *ngSwitchCase="TicketValidationState.TdUncertain"
              >Transportschein unklar
            </span>
            <span
              class="font-bold"
              *ngSwitchCase="TicketValidationState.DocumentsMissing"
              >Dokumente fehlen
            </span>
            <span
              class="font-bold"
              *ngSwitchCase="TicketValidationState.Archived"
              >Archiviert
            </span>
          </ng-container>
        </mat-list-item>
        <mat-list-item role="listitem">
          Typ:
          <span class="font-bold">
            {{ tour.type }}
          </span>
        </mat-list-item>
        <mat-list-item role="listitem">
          Kategorie:
          <span class="font-bold">
            {{ tour.category }}
          </span>
        </mat-list-item>
      </mat-list>
      <mat-list
        class="col-span-2 max-h-96 overflow-y-auto"
        *ngIf="tour.ticket.errors.length > 0 || tour.ticket.notes.length > 0"
        role="list"
      >
        <div mat-subheader class="text-sm">Ticket Anmerkungen</div>
        <mat-list-item
          *ngFor="let error of tour.ticket.errors"
          lines="2"
          role="listitem"
        >
          <mat-icon matListItemIcon class="!text-red-600">error</mat-icon>
          <span matListItemTitle>{{ error.split(':').at(0) }}</span>
          <span [title]="error.split(':').at(1)">{{
            error.split(':').at(1)
          }}</span>
        </mat-list-item>
        <mat-list-item
          *ngFor="let note of tour.ticket.notes"
          lines="2"
          role="listitem"
        >
          <mat-icon matListItemIcon class="!text-yellow-400">warning</mat-icon>
          <span matListItemTitle>{{ note.split(':').at(0) }}</span>
          <span [title]="note.split(':').at(1)">{{
            note.split(':').at(1)
          }}</span>
        </mat-list-item>
      </mat-list>
    </div>
  `,
    styles: [],
    imports: [
        MatIconModule,
        MatListModule,
        MatDividerModule,
        NgIf,
        NgFor,
        NgSwitch,
        NgSwitchCase,
    ]
})
export class AccountingTourTicketComponent {
  @Input() tour!: Tour & { ticket: Ticket };

  TicketValidationState = TicketValidationState;
}