import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { DialogService } from '@ngneat/dialog';
import { TicketValidationState } from '../../core/data-access/graphql/generated/generated';
import { TicketLaneComponent } from './ticket-lane/ticket-lane.component';
import { TicketStateInfoCardComponent } from './ticket-state-info-card/ticket-state-info-card.component';
import { TicketsSearchDialogComponent } from './tickets-search-dialog/tickets-search-dialog.component';

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'dks-tickets-page',
  template: `<section class="h-full p-6 grid grid-cols-1 md:grid-cols-4 gap-6">
    <div class="col-span-1 md:col-span-4 flex justify-end items-center">
      <button mat-icon-button (click)="showSearchDialog()">
        <mat-icon>search</mat-icon>
      </button>
    </div>
    <app-ticket-state-info-card
      [ticketState]="TicketState.Created"
    ></app-ticket-state-info-card>
    <app-ticket-state-info-card
      [ticketState]="TicketState.UserInteractionRequired"
    ></app-ticket-state-info-card>
    <app-ticket-state-info-card
      [ticketState]="TicketState.TdUncertain"
    ></app-ticket-state-info-card>
    <app-ticket-state-info-card
      [ticketState]="TicketState.DocumentsMissing"
    ></app-ticket-state-info-card>
    <dks-ticket-lane
      class="overflow-y-auto mat-elevation-z2"
      [ticketState]="TicketState.Created"
    ></dks-ticket-lane>
    <dks-ticket-lane
      class="overflow-y-auto mat-elevation-z2"
      [ticketState]="TicketState.UserInteractionRequired"
    ></dks-ticket-lane>
    <dks-ticket-lane
      class="overflow-y-auto mat-elevation-z2"
      [ticketState]="TicketState.TdUncertain"
    ></dks-ticket-lane>
    <dks-ticket-lane
      class="overflow-y-auto mat-elevation-z2"
      [ticketState]="TicketState.DocumentsMissing"
    ></dks-ticket-lane>
  </section>`,
  styles: [
    `
      :host {
        display: block;
        height: calc(100% - 64px);
      }
      section {
        grid-template-rows: 2rem auto 1fr;
      }
    `,
  ],
  imports: [
    TicketStateInfoCardComponent,
    TicketLaneComponent,
    MatButtonModule,
    MatIconModule,
  ],
})
export class TicketsPageComponent {
  private dialog = inject(DialogService);
  TicketState = TicketValidationState;

  showSearchDialog(): void {
    this.dialog.open(TicketsSearchDialogComponent);
  }
}
