import {Component, output} from '@angular/core';
import {ContactAddForm} from "../contact-add-form/contact-add-form";
import {NzMessageService} from "ng-zorro-antd/message";
import {NzButtonComponent} from "ng-zorro-antd/button";
import {NzModalComponent} from "ng-zorro-antd/modal";

@Component({
  selector: 'app-create-contact-modal',
  imports: [
    ContactAddForm,
    NzButtonComponent,
    NzModalComponent
  ],
  template: `
    <button nz-button nzType="primary" (click)="showModal()">
      <span style="font-weight: bold">+</span>
    </button>
    <nz-modal
        [(nzVisible)]="isVisible"
        [nzTitle]="modalTitle"
        [nzContent]="modalContent"
        [nzFooter]="modalFooter"
        (nzOnCancel)="handleCancel()">
      <ng-template #modalTitle style="text-align: center">Création de contacts</ng-template>

      <ng-template #modalContent>
        <app-contact-add-form/>
      </ng-template>

      <ng-template #modalFooter>
        <button nz-button nzType="default" (click)="handleCancel()">Annuler</button>
        <button nz-button nzType="primary" (click)="handleOk()" [nzLoading]="isConfirmLoading">Confirmer</button>
      </ng-template>
    </nz-modal>
  `,
  styleUrl: './create-contact-modal.css',
})
export class CreateContactModal {
  constructor(private message: NzMessageService) {}
  isVisible = false;
  isConfirmLoading = false;

  showModal(): void {
    this.isVisible = true;
  }

  handleOk(): void {
    this.isConfirmLoading = true;
    this.message.success('Client créé !');
    setTimeout(() => {
      this.isVisible = false;
      this.isConfirmLoading = false;
    }, 300);
    this.triggerCreated.emit();
  }

  handleCancel(): void {
    this.isVisible = false;
    this.message.info('Création annulée');
  }

  triggerCreated = output<void>()
}