import { Component, inject } from '@angular/core';
import {
  FormBuilder,
  FormsModule,
  ReactiveFormsModule,
  Validators,
} from '@angular/forms';
import QualificationService from '../../services/qualification.service';
import {
  MAT_DIALOG_DATA,
  MatDialogActions,
  MatDialogClose,
  MatDialogContent,
  MatDialogRef,
  MatDialogTitle,
} from '@angular/material/dialog';
import { MatButton } from '@angular/material/button';
import {
  MatError,
  MatFormField,
  MatHint,
  MatLabel,
} from '@angular/material/form-field';
import { MatInput } from '@angular/material/input';
import { NgIf } from '@angular/common';
import { Qualification } from '../Qualification';
import { MatIcon } from '@angular/material/icon';

@Component({
  selector: 'app-edit-qualification',
  imports: [
    FormsModule,
    MatButton,
    MatDialogActions,
    MatDialogContent,
    MatDialogTitle,
    MatError,
    MatFormField,
    MatInput,
    MatLabel,
    NgIf,
    ReactiveFormsModule,
    MatDialogClose,
    MatHint,
    MatIcon,
  ],
  templateUrl: './edit.component.html',
})
export class EditComponent {
  public apiErrorMessage = '';
  public qualification: Qualification = inject(MAT_DIALOG_DATA);

  private formBuilder: FormBuilder = inject(FormBuilder);
  private qualificationService: QualificationService =
    inject(QualificationService);
  private dialogRef: MatDialogRef<EditComponent> = inject(MatDialogRef);

  qualificationForm = this.formBuilder.group({
    skill: [this.qualification.skill, Validators.required],
  });

  isFieldInvalid(fieldName: string): boolean {
    const field = this.qualificationForm.get(fieldName);

    if (!field) {
      throw new Error('Form field does not exist: ' + fieldName);
    }

    return field.invalid && (field.dirty || field.touched);
  }

  getErrorMessage(fieldName: string): string {
    const field = this.qualificationForm.get(fieldName);

    if (field?.errors?.['required']) {
      return 'This field is required';
    }

    return '';
  }

  edit() {
    if (!this.qualificationForm.valid) {
      console.error('Validation failed');
      return;
    }

    const qualification = {
      skill: this.qualificationForm.value.skill || '',
    };

    this.qualificationService
      .update(this.qualification.id, qualification)
      .subscribe({
        next: (editedQualification) => {
          this.dialogRef.close(editedQualification);
        },
        error: (error) => {
          console.error('Error updating qualification:', error);
          this.apiErrorMessage = 'API Error';
        },
      });
  }
}