
import {
  ChangeDetectionStrategy,
  Component,
  EventEmitter,
  Input,
  Output,
} from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
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-td-uncertain',
    template: `<div class="flex flex-col 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>Wo befindet sich der Transportschein?</label>
        <mat-radio-group
          [(ngModel)]="formModel.tdLocation"
          name="tdLocation"
          required
        >
          <mat-radio-button [value]="'company'"> Im Betrieb </mat-radio-button>
          <mat-radio-button [value]="'customer'">
            Beim Kunden
          </mat-radio-button>
          <mat-radio-button [value]="'practice'">
            In der Praxis
          </mat-radio-button>
        </mat-radio-group>
      </div>
    </form>
  </div>`,
    imports: [
        MatButtonModule,
        MatIconModule,
        MatFormFieldModule,
        MatRadioModule,
        FormsModule,
    ]
})
export class TicketTdUncertainComponent {
  @Input() ticket!: Ticket & { tours: Tour[] };
  @Output() saveFormData = new EventEmitter();

  TicketState = TicketValidationState;
  ApprovalState = ApprovalState;

  formModel = {
    tdLocation: '',
  };

  saveForm() {
    this.saveFormData.emit(this.formModel);
  }
}
