import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';
import { DialogCloseDirective, DialogRef } from '@ngneat/dialog';
import { MatRadioModule } from '@angular/material/radio';

@Component({
  template: `<div class="flex flex-col items-center justify-start p-4">
    <div class="text-lg font-bold pb-2">Genehmigung angefragt</div>
    <hr />
    <form #form="ngForm" class="flex flex-col w-full">
      <div class="flex flex-col p-2">
        <label>Wer fragte die Genehmigung an?</label>
        <mat-radio-group [(ngModel)]="formModel.who" name="who" required>
          <mat-radio-button value="Avicenna"> Avicenna </mat-radio-button>
          <mat-radio-button value="Kunde"> Kunde </mat-radio-button>
        </mat-radio-group>
      </div>

      <mat-form-field class="p-2">
        <mat-label>Name des Sachbearbeiters?</mat-label>
        <input
          type="text"
          matInput
          id="staff"
          [(ngModel)]="formModel.staff"
          name="staff"
          required
        />
      </mat-form-field>
      <!-- <div class="pb-4 border-b border-gray-400">{{ ref.data.body }}</div> -->
      <div class="flex justify-end pt-4">
        <button mat-stroked-button class="mr-2" dialogClose>Abbrechen</button>
        <button mat-flat-button color="primary" [disabled]="form.invalid" [dialogClose]="formModel">
          Bestätigen
        </button>
      </div>
    </form>
  </div>`,
  standalone: true,
  imports: [
    DialogCloseDirective,
    MatFormFieldModule,
    MatButtonModule,
    MatRadioModule,
    MatInputModule,
    MatSelectModule,
    FormsModule,
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ApprovalRequestDialogComponent {
  ref: DialogRef<any> = inject(DialogRef);

  formModel = {
    who: undefined,
    staff: undefined,
  };
}
