import { Component, inject, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { CommonModule } from '@angular/common';
import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { AngularMaterialModule } from '../shared/module/angular-material.module';

@Component({
  selector: 'app-carnet-dialog',
  imports: [AngularMaterialModule, CommonModule, ReactiveFormsModule],
  template: `
    <h2 mat-dialog-title>{{title}}</h2>
    <mat-dialog-content>
      <form [formGroup]="carnetForm">
        <div class="form-row">     
          <!-- Carnet Number Field -->
          <mat-form-field appearance="outline">
            <mat-label>Carnet Number</mat-label>
            <input matInput formControlName="carnetNumber" required>
            <mat-error *ngIf="carnetForm.get('carnetNumber')?.errors?.['required']">
                Carnet number is required
            </mat-error>
          </mat-form-field>
        </div>
        </form>
    </mat-dialog-content>
    <mat-dialog-actions>
      <button mat-raised-button color="primary" (click)="onSubmit()" [disabled]="!carnetForm.valid">
        Ok
      </button>
      <button mat-button (click)="onCancel()">Cancel</button>
    </mat-dialog-actions>
  `,
  styles: [`
     
    .form-row {
        display: flex;
        gap: 16px;
        margin-top: 0.5rem;
        align-items: start;

        mat-form-field {
            flex: 1;
            margin-bottom: 6px;
        }
      }
  `]
})
export class CarnetDialogComponent {
  carnetAction: any | null = null;
  carnetForm: FormGroup;
  title: string = '';

  private fb = inject(FormBuilder);

  constructor(
    public dialogRef: MatDialogRef<CarnetDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: { carnetAction: string }
  ) {
    this.carnetAction = data.carnetAction;

    this.carnetForm = this.fb.group({
      carnetNumber: ['', Validators.required]
    });
  }

  ngOnInit(): void {
    this.setTitle();
  }

  setTitle(): void {
    if (this.carnetAction === 'duplicate') {
      this.title = 'Duplicate Carnet';
    } else if (this.carnetAction === 'extend') {
      this.title = 'Extend Carnet';
    } else if (this.carnetAction === 'additional') {
      this.title = 'Additional Sets';
    }
  }

  onSubmit(): void {
    this.dialogRef.close(this.carnetForm.value.carnetNumber);
  }

  onCancel(): void {
    this.dialogRef.close();
  }
}