import { CommonModule } from '@angular/common';
import { Component, ElementRef, HostListener } from '@angular/core';
import { Router, RouterModule } from '@angular/router';
import { BadgeModule } from 'primeng/badge';
import { InputTextModule } from 'primeng/inputtext';
import { OverlayBadgeModule } from 'primeng/overlaybadge';
import { RippleModule } from 'primeng/ripple';
import { StyleClassModule } from 'primeng/styleclass';
import { AuthService } from './../../core/services/auth.service';

@Component({
  selector: 'app-topbar',
  standalone: true,
  imports: [
    RouterModule,
    CommonModule,
    StyleClassModule,
    InputTextModule,
    RippleModule,
    BadgeModule,
    OverlayBadgeModule,
  ],
  template: ` <div
    class="flex justify-between items-center px-8 bg-surface-0 dark:bg-surface-950 relative lg:static border-b border-surface"
    style="height:60px"
  >
    <div class="flex">
      <a
        pRipple
        class="cursor-pointer inline-flex items-center justify-center lg:hidden text-surface-700 dark:text-surface-100 mr-4"
        pStyleClass="#app-sidebar"
        enterFromClass="hidden"
        enterActiveClass="animate-fadeinleft"
        leaveToClass="hidden"
        leaveActiveClass="animate-fadeoutleft"
        [hideOnOutsideClick]="true"
      >
        <i class="pi pi-bars text-4xl"></i>
      </a>
    </div>
    <a
      pRipple
      class="cursor-pointer block lg:hidden text-surface-700 dark:text-surface-100"
      pStyleClass="@next"
      enterFromClass="hidden"
      enterActiveClass="animate-fadein"
      leaveToClass="hidden"
      leaveActiveClass="animate-fadeout"
      [hideOnOutsideClick]="true"
    >
      <i class="pi pi-ellipsis-v text-2xl"></i>
    </a>
    <div
      class="hidden lg:flex lg:justify-end absolute lg:static w-full bg-surface-0 dark:bg-surface-900 left-0 top-full z-10 shadow lg:shadow-none"
    >
      <ul class="flex list-none p-0 m-0 flex-col lg:flex-row">
        <li class="h-full relative">
          <a
            pRipple
            class="cursor-pointer h-full inline-flex items-center text-surface-600 dark:text-surface-200 py-4 lg:py-0 px-4 border-l-2 lg:border-l-0 lg:border-b-2 border-transparent hover:border-surface-500 dark:hover:border-surface-300 transition-colors duration-150"
            pStyleClass="@next"
            enterFromClass="hidden"
            enterActiveClass="animate-scalein"
            leaveToClass="hidden"
            leaveActiveClass="animate-fadeout"
            [hideOnOutsideClick]="true"
          >
            <!-- <img
              src="assets/images/blocks/avatars/circle/avatar-f-1.png"
              class="lg:mr-0"
              style="width: 28px; height: 28px"
            /> -->
            <span
              class="mx-2 font-medium text-surface-900 dark:text-surface-0"
              >{{ fullName }}</span
            >
            <i class="pi pi-angle-down"></i>
          </a>
          <div
            class="hidden static lg:absolute w-full bg-surface-0 dark:bg-surface-900 left-0 top-full z-10 shadow-none lg:shadow origin-top rounded-border pl-4 lg:pl-0"
          >
            <ul class="list-none p-0 m-0">
              <li>
                <a
                  (click)="goToProfile()"
                  pRipple
                  class="cursor-pointer h-full inline-flex items-center text-surface-600 dark:text-surface-200 border-l-2 border-transparent hover:border-surface-500 dark:hover:border-surface-300 transition-colors duration-150 p-4"
                >
                  <span class="pi pi-user mr-2"></span>
                  <span class="font-medium">Profilo</span>
                </a>
              </li>
              <li>
                <a
                  pRipple
                  class="cursor-pointer h-full inline-flex items-center text-surface-600 dark:text-surface-200 border-l-2 border-transparent hover:border-surface-500 dark:hover:border-surface-300 transition-colors duration-150 p-4"
                >
                  <span class="pi pi-cog mr-2"></span>
                  <span class="font-medium">Impostazioni</span>
                </a>
              </li>
              <li>
                <a
                  routerLink="/login"
                  pRipple
                  class="cursor-pointer h-full inline-flex items-center text-surface-600 dark:text-surface-200 border-l-2 border-transparent hover:border-surface-500 dark:hover:border-surface-300 transition-colors duration-150 p-4"
                >
                  <span class="pi pi-sign-out mr-2"></span>
                  <span class="font-medium">Esci</span>
                </a>
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </div>`,
})
export class AppTopbar {
  fullName;
  constructor(
    private eRef: ElementRef,
    private authService: AuthService,
    public router: Router,
  ) {
    this.fullName = this.authService.userAccountFullName;
  }

  @HostListener('document:click', ['$event'])
  onClickOutside(event: Event) {
    const sidebar = document.getElementById('app-sidebar');

    if (
      sidebar &&
      !this.eRef.nativeElement.contains(event.target) &&
      !sidebar.contains(event.target as Node)
    ) {
      sidebar.classList.add('hidden'); // Nasconde la sidebar
    }
  }

  goToProfile() {
    this.router.navigate(['/gestisci-profilo']);
  }
}
