import { CommonModule } from '@angular/common';
import { Component, Input, Signal, inject, signal, effect } from '@angular/core';
import { Router, RouterLink } from '@angular/router';
import { ReactiveButtonComponent } from 'src/app/components/shared/reactive-button/reactive-button.component';
import { SidebarComponent } from './sidebar.component';
import { AuthService } from '../../auth/auth.service';
import { UiUser } from '../../interfaces/interfaces.ui';
import { AuthSignalsStateService } from 'src/app/components/shared/services/signal-state/auth-signals-state.service';
import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { MatButtonModule } from '@angular/material/button';
import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
import { NotificationsComponent } from '../../../components/notifications/notifications.component';
@Component({
  selector: 'app-header',
  standalone: true,
  imports: [
    CommonModule,
    RouterLink,
    ReactiveButtonComponent,
    SidebarComponent,
    MatIconModule,
    MatMenuModule,
    MatButtonModule,
    MatSnackBarModule

  ],
  template: `
    <nav class="main opacity-bg border-b border-gray-300">
      <div class="mx-auto px-8">
        <div class="flex w-full items-center justify-between">
          <div class="flex items-center gap-4 p-5">
            <img
              class="h-14 cursor-pointer"
              [routerLink]="isAuth ? ['/'] : null"
              src="assets/img/.png"
              alt="logo " />
            <h5 class="italic text-primary-500"></h5>
          </div>

          <div class="flex gap-14 p-5">
            <div class="flex gap-3">
              <reactive-button
                customClass="header-item"
                routerLink="/private/home"
                variant="secondary"
                [hidden]="!isAuth"
                icon="home"
                [active]="isActivatedRoute('/private/home')">
                <span>Accueil</span>
              </reactive-button>

              <reactive-button
                customClass="header-item"
                routerLink="/private/enregistrement"
                variant="secondary"
                icon="calendar_month"
                [hidden]="!isAuth"
                [active]="isActivatedRoute('/private/enregistrement')">
                <span>Enregistrer une visite</span>
              </reactive-button>

              <reactive-button
                customClass="header-item"
                routerLink="/private/notifications"
                variant="secondary"
                icon="notifications_none"
                [hidden]="!isAuth"
                [action]="countbadge"
                [snackbar]="openSnackBar"
                [badge]="countBadge">
              </reactive-button>
            </div>

            <div *ngIf="isAuth">
              <div
                [mat-menu-trigger-for]="menu"
                #trigger="matMenuTrigger"
                class="material-symbols-outlined cursor-pointer select-none rounded-xl border border-gray-300 p-3 text-gray-600 active:bg-gray-200">
                {{ trigger.menuOpen ? 'close' : 'menu' }}
              </div>
              <mat-menu #menu="matMenu">
                <div class="border-b border-gray-200 pb-2 pt-1 text-left text-sm">
                  <span class="mx-4 font-semibold text-gray-500">{{
                    currentUser()?.username
                  }}</span>
                </div>

                <div class="flex gap-3 p-1">
                  <reactive-button
                    [action]="logout"
                    class="w-full"
                    variant="secondary"
                    icon="logout"
                    menuItem>
                    Déconnexion
                  </reactive-button>
                </div>
              </mat-menu>
            </div>
          </div>
        </div>
      </div>
    </nav>
  `,
})
export class HeaderComponent {
  Username: string | undefined = '';
  @Input() isAuth!: boolean;
  private authService = inject(AuthService);
  private router = inject(Router);
  private _snackBar = inject(MatSnackBar);
  private authState = inject(AuthSignalsStateService);
  durationInSeconds = 5;

  currentUser: Signal<UiUser | null>;

  constructor() {
    this.currentUser = this.authState.select('user');
  }


  openSnackBar = () => {
    this._snackBar.open('Vous avez 5 notifications', 'Fermer', {
      duration: this.durationInSeconds * 1000,
    });
  };


  logout = (): void => {
    this.authService.logout();
  };

  login = () => {
    this.authService.login();
  };

  isActivatedRoute = (route: string): boolean => {
    return this.router.url.includes(route);
  };
  countBadge: number = 5;

countbadge = () => {
    this.countBadge = this.countBadge - 1;
  };


  protected readonly open = open;
}