import {Component, inject, input, output, signal} from '@angular/core';
import {
  ContactsService,
  CustomersService, GetContactDto,
  GetCustomerDto,
  UpdateContactDto,
  UpdateCustomerDto
} from "../../../services/api";
import {NzNotificationService} from "ng-zorro-antd/notification";
import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
import {firstValueFrom} from "rxjs";
import {NzCardComponent} from "ng-zorro-antd/card";
import {NzColDirective, NzRowDirective} from "ng-zorro-antd/grid";
import {NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
import {NzIconDirective} from "ng-zorro-antd/icon";
import {NzInputDirective} from "ng-zorro-antd/input";

@Component({
  selector: 'app-contact-card',
  imports: [NzCardComponent, NzColDirective, NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent, NzIconDirective, NzInputDirective, NzRowDirective, ReactiveFormsModule],
  templateUrl: './contact-card.html',
  styleUrl: './contact-card.css',
})
export class ContactCard {
  private contactsService = inject(ContactsService);
  private notificationService = inject(NzNotificationService)

  contactEdit = signal<UpdateContactDto>(null);
  contactsLoading = signal<boolean>(false);

  contactForm = new FormGroup({
    id: new FormControl(null, [Validators.required]),
    lastname: new FormControl<string>(null, [Validators.required]),
    firstname: new FormControl(null, [Validators.required]),
    phone: new FormControl(null, [Validators.required]),
    email: new FormControl(null, [Validators.required]),
    address: new FormControl(null, [Validators.required]),
    city: new FormControl(null, [Validators.required]),
    role: new FormControl(null, [Validators.required])
  })

  async submitForm() {
    this.contactsLoading.set(true);

    const contactValue = {
      lastname: this.contactForm.value.lastname,
      firstname: this.contactForm.value.firstname,
      phone: this.contactForm.value.phone,
      email: this.contactForm.value.email,
      address: this.contactForm.value.address,
      city: this.contactForm.value.city,
      role: this.contactForm.value.role,
    }

    try {
      const contact = await firstValueFrom(this.contactsService.updateContactRequest(this.contact().id,contactValue));
      this.contactEdit.set(contact);
      console.log(contact);
      this.contactForm.reset();
      this.edit.set(false);

      this.triggerEdited.emit();

    } catch (e)
    {
      this.notificationService.error('Erreur', ' (ou Erreur de communication avec l\'API)');
    }

    this.contactsLoading.set(false);

  }


  contact = input<GetContactDto>(null);

  edit = signal(false)

  triggerEdited = output<void>();

  protected Edit() {
    this.edit.set(true)
  }

  protected Back() {
    this.edit.set(false)
    this.contactForm.reset();
  }

  async Delete() {
    this.contactsLoading.set(true);

    try {
      const contact = await firstValueFrom(this.contactsService.deleteContactEndpoint(this.contact().id));
      this.contactEdit.set(contact);

      this.contactForm.reset();
      this.triggerEdited.emit();

    } catch (e)
    {
      this.notificationService.error('Erreur de recherche', "Le contact n\'existe pas !");

      this.notificationService.error('Erreur', ' (ou Erreur de communication avec l\'API)');
    }

    this.contactsLoading.set(false);
  }
}