import {Component, inject, OnInit, signal, viewChild} from '@angular/core';
import {ModalNav} from "../modal-nav/modal-nav";
import {NzIconDirective} from "ng-zorro-antd/icon";
import {NzTableComponent} from "ng-zorro-antd/table";
import {ProfilForm} from "../profil-form/profil-form";
import {NzDividerComponent} from "ng-zorro-antd/divider";
import {GetUserDto, UsersService} from "../../services/api";
import {NzNotificationService} from "ng-zorro-antd/notification";
import {firstValueFrom} from "rxjs";

@Component({
  selector: 'app-user-table',
    imports: [
        ModalNav,
        NzIconDirective,
        NzTableComponent,
        ProfilForm,
        NzDividerComponent
    ],
  templateUrl: './user-table.html',
  styleUrl: './user-table.css',
})
export class UserTable implements OnInit {
    private usersService = inject(UsersService);
    private notificationService = inject(NzNotificationService)
    users = signal<GetUserDto[]>([]);
    usersLoading = signal<boolean>(false);
    updateUser = viewChild.required<ProfilForm>('profilForm');
    modal = viewChild.required<ModalNav>('modalNav');

    async ngOnInit() {
        await this.fetchUsers();
    }

    async fetchUsers() {
        this.usersLoading.set(true)

        try {
            const users = await firstValueFrom(this.usersService.getAllUsersEndpoint())
            this.users.set(users);
        } catch (e) {
            this.notificationService.error(
                'Erreur',
                'Erreur de communication avec l\'API'
            )
        }
        this.usersLoading.set(false)
    }

    async delete(user:number) {
        try {
            await firstValueFrom(this.usersService.deleteUserEndpoint(user))
            this.notificationService.success(
                'Success',
                'Suppression effectuée'
            )
        } catch (e) {
            this.notificationService.error(
                'Erreur',
                'Impossible de supprimer la ligne'
            )
        }
        await this.fetchUsers();
    }

    async edit(id: number, updateUserComponent: ProfilForm) {
        if (updateUserComponent.profilForm.invalid) {
            this.notificationService.error(
                'Erreur',
                'Erreur d\'écriture dans le formulaire'
            )
            return;
        }

        try {
            const users = updateUserComponent.profilForm.getRawValue();
            await firstValueFrom(this.usersService.updateUserEndpoint(id, users))

            this.notificationService.success(
                'Success',
                'Utilisateur modifié'
            )
        } catch (e) {
            this.notificationService.error(
                'Erreur',
                'Erreur lors de la modification'
            )
        }
    }

    selectedUser: GetUserDto | null = null;
    openEditModal(user: GetUserDto) {
        this.selectedUser = { ...user };
        this.modal().showModal();
    }

    async onModalOk(userId: number, updateUserComponent: ProfilForm, modal: ModalNav) {
        if (!this.selectedUser) return;

        await this.edit(userId, updateUserComponent);
        updateUserComponent.profilForm.reset();
        modal.isVisible = false;
        await this.fetchUsers();
    }
    onModalCancel(modal: ModalNav) {
        modal.isVisible = false;
    }
}