import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import {
  ReactiveFormsModule,
  FormGroup,
  Validators,
  FormBuilder,
} from '@angular/forms';
import { MatSnackBar } from '@angular/material/snack-bar';
import { RouterLink, Router, ActivatedRoute } from '@angular/router';
import { IUtilisateur } from 'src/app/_interfaces/utilisateur/user';
import { UserService } from 'src/app/_services/utilisateur/user.service';

@Component({
  selector: 'bgui-edit-user',
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule, RouterLink],
  templateUrl: './edit-user.component.html',
  styleUrl: './edit-user.component.scss',
})
export class EditUserComponent {
  editUserForm!: FormGroup;
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  showAlert!: any;
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  //editUserForm!: FormGroup<any>;

  constructor(
    private fb: FormBuilder,
    private router: Router,
    private route: ActivatedRoute,
    private userService: UserService,
    private snackBar: MatSnackBar
  ) {}
  ngOnInit(): void {
    this.editUserForm = this.fb.group({
      id: ['', Validators.required],
      first_name: ['', Validators.required],
      last_name: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]],
      // password: ['', [Validators.required, Validators.minLength(8)]],
      profile_photo: [''], // Peut-être ajouté Validators.required si nécessaire
      role: ['', Validators.required],
      username: ['', Validators.required],
    });

    this.route.paramMap.subscribe(params => {
      const id = params.get('id');
      console.log('id', id);
      if (id) {
        this.userService.getServiceById(Number(id)).subscribe(
          (data: IUtilisateur) => {
            this.editUserForm.patchValue({
              id: data.id,
              first_name: data.first_name,
              last_name: data.last_name,
              email: data.email,
              // password: data.password,
              profile_photo: data.profile_photo,
              role: data.role,
              username: data.username,
            });
          },
          error => {
            console.error('Erreur lors de la récupération du service :', error);
          }
        );
      } else {
        console.error(
          'ID de service non fourni dans les paramètres de la route.'
        );
      }
    });
  }

  onSubmit(): void {
    console.log('------------------------------------------');
    console.log(this.editUserForm.value);
    if (this.editUserForm.valid) {
      console.log(this.editUserForm.value);
      this.userService.updateUser(this.editUserForm.value).subscribe(
        () => {
          this.router.navigate(['/utilisateurs/view-user']);
          this.snackBar.open('Utilisateur mis à jour avec succès', 'Fermer', {
            duration: 3000,
          });
        },
        error => {
          console.error(
            'Erreur lors de la mise à jour de Utilisateur :',
            error
          );
          this.snackBar.open(
            'Erreur lors de la mise à jour du service',
            'Fermer',
            {
              duration: 3000,
            }
          );
        }
      );
    } else {
      this.snackBar.open(
        'Veuillez remplir correctement tous les champs du formulaire',
        'Fermer',
        {
          duration: 3000,
        }
      );
    }
  }

  onCancel(): void {
    this.router.navigate(['/utilisateurs/view-user']);
  }
}