import {Component, inject, input, OnInit, output} from '@angular/core';
import {FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators} from "@angular/forms";
import {IonicModule, LoadingController, ToastController} from "@ionic/angular";
import {GetUserDetailsDto, UsersService} from "../../services/api";
import {firstValueFrom} from "rxjs";

@Component({
    selector: 'app-profil-form',
    templateUrl: './profil-form.component.html',
    styleUrls: ['./profil-form.component.scss'],
    imports: [
        FormsModule,
        IonicModule,
        ReactiveFormsModule
    ]
})
export class ProfilFormComponent implements OnInit {
    private toastCtrl = inject(ToastController);
    private loadCtrl = inject(LoadingController);
    private usersServices = inject(UsersService);

    profileForm: FormGroup = new FormGroup({
        firstName: new FormControl<string>(null, [Validators.required]),
        name: new FormControl<string>(null, [Validators.required]),
        username: new FormControl<string>(null, [Validators.required]),
        email: new FormControl<string>(null, [Validators.required])
    })

    user = input.required<GetUserDetailsDto>();
    userEdited = output<GetUserDetailsDto>();

    ngOnInit() {
        this.profileForm.patchValue({
            firstName: this.user().firstName,
            name: this.user().name,
            username: this.user().username,
            email: this.user().email,
        })
    }

    async updateUser() {
        const loading = await this.loadCtrl.create({
            message: 'Vérification...',
            spinner: 'lines-sharp-small'
        });
        await loading.present();

        if (this.profileForm.invalid) {
            const toast = await this.toastCtrl.create({
                message: 'Tout les champs sont requis',
                duration: 2000,
                color: 'danger'
            });
            await loading.dismiss();
            await toast.present();

            return;
        }
        await loading.dismiss();

        const loading2 = await this.loadCtrl.create({
            message: 'Modification...',
            spinner: 'lines-sharp-small'
        });
        await loading2.present();

        try {
            const form = this.profileForm.getRawValue();

            await firstValueFrom(this.usersServices.updateUserEndpoint(form));
            const userEdited = {
                id: this.user().id,
                firstName: form.firstName,
                name: form.name,
                username: form.username,
                email: form.email,
                designationId: this.user().designationId,
                designationName: this.user().designationName,
                creationDate: this.user().creationDate,
                getUserStatsDto: this.user().getUserStatsDto
            }

            this.userEdited.emit(userEdited);

            const toast = await this.toastCtrl.create({
                message: 'Modification réussie',
                duration: 2000,
                color: 'success'
            });

            await loading2.dismiss();
            await toast.present();
        } catch {
            const toast = await this.toastCtrl.create({
                message: 'Modification impossible',
                duration: 2000,
                color: 'danger'
            });
            await loading2.dismiss();
            await toast.present();
        }
    }
}