import { CdkScrollableModule } from '@angular/cdk/scrolling';
import { Component, inject, computed, signal } from '@angular/core';
import { form, FormField } from '@angular/forms/signals';
import { MatButtonModule } from '@angular/material/button';
import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule } from '@angular/material/dialog';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatTableModule } from '@angular/material/table';

export interface ReasonFormData {
  son: string;
}

@Component({
  selector: 'app-reason',
  templateUrl: './reason.component.html',
  styleUrls: ['./reason.component.css'],
  imports: [
    CdkScrollableModule,
    MatButtonModule,
    MatDialogModule,
    MatFormFieldModule,
    MatInputModule,
    MatTableModule,
    FormField,
  ],
})
export class ReasonComponent {
  dialogRef = inject<MatDialogRef<ReasonComponent>>(MatDialogRef);
  private data = inject<{
    title: string;
    reasons: string[];
  }>(MAT_DIALOG_DATA);

  formModel = signal<ReasonFormData>({
    son: '',
  });

  form = form(this.formModel);

  dataSource = computed(() => this.reasons);
  title: string;
  selected = '';
  reasons: string[];
  displayedColumns = ['reason'];

  constructor() {
    const data = this.data;

    this.reasons = data.reasons ?? [];
    this.title = data.title;
  }

  select(reason: string) {
    this.selected = reason.trim();
    return true;
  }

  accept(): void {
    this.dialogRef.close(this.selected);
  }
}