import { Component, OnInit, Inject } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { tap } from 'rxjs/operators';
import { FaqComponent } from 'src/app/components/faq/faq.component';
import { ModalDecconectedComponent } from 'src/app/components/modal-decconected/modal-decconected.component';
import { ProfilComponent } from 'src/app/components/profil/profil.component';
import { ToastService } from 'src/app/services/toast.service';
import { UserStore } from 'src/app/stores/user.store';
import { DOCUMENT } from '@angular/common';
@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss'],
})
export class HeaderComponent implements OnInit {
  public infoUser!: any;
  public userFullName: string = '';
  
  constructor(
    public dialog: MatDialog,
    private userStore: UserStore,
    private toast: ToastService,
    @Inject(DOCUMENT) private document: Document,
  ) {
    this.userStore
      .select('user')
      .pipe(
        tap((res: any) => {
          console.log('UserStore response:', res);
          if (res && res.userInfo) {
            this.infoUser = res.userInfo;
            console.log('UserInfo:', res.userInfo);
            this.userFullName = res.userInfo.fullname || res.userInfo.username || res.userInfo.login || res.userInfo.name || 'Utilisateur';
            console.log('UserFullName set to:', this.userFullName);
          // } else if (res) {
          //   // Fallback si les données sont directement dans res
          //   console.log('res userinfo:', res);

          //   this.userFullName = res.fullname || res.username || res.login || res.name || 'Utilisateur';
          //   console.log('Direct UserFullName set to:', this.userFullName);
          } else {
            const user = localStorage.getItem('__user')
            if(user){
              const __user = JSON.parse(user)
              this.userFullName = __user.firstname || __user.fullname || __user.username || __user.login || __user.name || 'Utilisateur';
            }
          }
        })
      )
      .subscribe();
  }

  ngOnInit(): void {}
  
  public openDialog() {
    this.document.body.classList.add('logout-pop-element');
    const dialogExist = this.dialog.getDialogById('logout-pop');
    if (!dialogExist) {
      const dialogRef = this.dialog.open(ModalDecconectedComponent, {
        id: 'logout-pop',
        panelClass: 'logout-pop'
      });

      dialogRef.afterClosed().subscribe(result => {
        this.document.body.classList.remove('logout-pop-element');
      });
    }
  }

  public showInfo() {
    const dialogExist = this.dialog.getDialogById('profil-pop');
    if (!dialogExist) {
      this.dialog.open(ProfilComponent, {
        id: 'profil-pop',
        data: { infoUser: this.infoUser },
        position: { right: '0' },
        panelClass: ['animate__animated', 'animate__slideInRight', 'full-h-pop'],
      });
    }
  }

  public faq() {
    const dialogExist = this.dialog.getDialogById('faq-pop');
    if (!dialogExist) {
      this.dialog.open(FaqComponent, {
        id: 'faq-pop',
        position: { right: '0' },
        panelClass: ['animate__animated', 'animate__slideInRight', 'full-h-pop'],
      });
    }
  }

  public notifications() {
    this.toast.showWaring('en cours de dev');
  }

  public toggleMobileMenu() {
    // Émet un événement pour toggler le menu mobile
    // Cette méthode sera connectée au service de navigation
    const layoutElement = this.document.querySelector('.ng-layout');
    if (layoutElement) {
      layoutElement.classList.toggle('mobile-open');
    }
  }
}
