import { NgClass } from '@angular/common';
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { MatIconModule } from '@angular/material/icon';
import { MatListModule } from '@angular/material/list';
import {
  ApprovalState,
  Ticket,
  Tour,
} from '../../../core/data-access/graphql/generated/generated';

@Component({
    changeDetection: ChangeDetectionStrategy.OnPush,
    selector: 'dks-ticket-overview',
    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">
          Typ:
          <span class="font-bold">
            {{ ticket.tours[0].type }}
          </span>
        </mat-list-item>
        <mat-list-item role="listitem">
          Kategorie:
          <span class="font-bold">
            {{ ticket.tours[0].category }}
          </span>
        </mat-list-item>
      </mat-list>
      @if (ticket.approvalState) {
        <mat-list class="col-span-2" role="list">
          <div mat-subheader class="text-sm">Gehnemigungsinformationen</div>
          <mat-list-item role="listitem">
            @switch (ticket.approvalState) {
              @case (ApprovalState.Free) {
                <span>Genehmigungsfrei</span>
              }
              @case (ApprovalState.Unknown) {
                <span
                  title="Automatische Prüfung nicht möglich"
                  >Automatische Prüfung nicht möglich</span
                  >
                }
                @case (ApprovalState.Required) {
                  <span
                    >Genehmigung benötigt</span
                    >
                  }
                  @case (ApprovalState.Requested) {
                    <span
                      >Genehmigung angefragt</span
                      >
                    }
                    @case (ApprovalState.Approved) {
                      <span
                        >Genehmigung eingegangen</span
                        >
                      }
                    }
                  </mat-list-item>
                </mat-list>
              }
              @if (ticket.errors.length > 0 || ticket.notes.length > 0) {
                <mat-list
                  class="col-span-2 max-h-96 overflow-y-auto"
                  role="list"
                  >
                  <div mat-subheader class="text-sm">Ticket Anmerkungen</div>
                  @for (error of ticket.errors; track error) {
                    <mat-list-item
                      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>
                  }
                  @for (note of ticket.notes; track note) {
                    <mat-list-item
                      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>`,
    imports: [
    MatListModule,
    MatIconModule
]
})
export class TicketOverviewComponent {
  @Input() ticket!: Ticket & { tours: Tour[] };

  ApprovalState = ApprovalState;
}
