import { Component } from '@angular/core';
import {NzMessageService} from "ng-zorro-antd/message";
import {StaffAddForm} from "../staff-add-form/staff-add-form";
import {NzButtonModule} from "ng-zorro-antd/button";
import {NzModalModule} from "ng-zorro-antd/modal";
import {ProvidersAddForm} from "../../providers/providers-add-form/providers-add-form";

@Component({
  selector: 'app-staff-card-form',
    imports: [NzButtonModule, NzModalModule, StaffAddForm],
    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 artificiers</ng-template>

            <ng-template #modalContent>
                <app-staff-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: './staff-card-form.css',
})
export class StaffCardForm {
    constructor(private message: NzMessageService) {}
    isVisible = false;
    isConfirmLoading = false;

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

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

    handleCancel(): void {
        this.isVisible = false;
    }
}