
import {
  ChangeDetectionStrategy,
  Component,
  EventEmitter,
  Input,
  Output,
} from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatRadioModule } from '@angular/material/radio';
import {
  ApprovalState,
  Ticket,
  TicketValidationState,
  Tour,
} from '../../../core/data-access/graphql/generated/generated';

@Component({
    changeDetection: ChangeDetectionStrategy.OnPush,
    selector: 'dks-ticket-documents-missing',
    template: `<div class="flex items-center p-3">
      <form #form="ngForm" class="flex flex-col w-full">
        <div class="flex justify-end pt-4">
          <button mat-stroked-button class="mr-2" (click)="form.resetForm()">
            Zurücksetzen
          </button>
          <button
            mat-flat-button
            color="primary"
            [disabled]="form.invalid"
            (click)="saveForm()"
            >
            Speichern
          </button>
        </div>
        <div class="flex flex-col p-2">
          <label>Alles vorhanden?</label>
          @if (ticket.approvalState !== ApprovalState.Free) {
            <mat-checkbox
              [(ngModel)]="formModel.approval.location"
              name="approval"
              >Genehmigung</mat-checkbox
              >
            }
            <mat-checkbox
              [(ngModel)]="formModel.tdLocation"
              name="transport_document"
              >Transportschein</mat-checkbox
              >
            </div>
          </form>
        </div>`,
    imports: [
    MatButtonModule,
    MatIconModule,
    MatFormFieldModule,
    MatRadioModule,
    MatCheckboxModule,
    FormsModule
]
})
export class TicketDocumentsMissingComponent {
  @Input() ticket!: Ticket & { tours: Tour[] };
  @Output() saveFormData = new EventEmitter();

  TicketState = TicketValidationState;
  ApprovalState = ApprovalState;

  formModel = {
    approval: {
      location: false,
    },
    tdLocation: false,
  };

  ngOnInit(): void {
    this.formModel = {
      approval: {
        location: this.ticket.documentInfo?.approval?.location === 'company',
      },
      tdLocation: this.ticket.documentInfo?.tdLocation === 'company',
    };
  }

  saveForm() {
    this.saveFormData.emit({
      ...(this.formModel.approval.location
        ? { approval: { location: 'company' } }
        : {}),
      ...(this.formModel.tdLocation ? { tdLocation: 'company' } : {}),
    });
  }
}
