import { Component, inject, signal, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import { RouterLink } from '@angular/router';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { cssMenu, cssClose } from '@ng-icons/css.gg';
import { ToogleThemeComponent } from '@shared/utils/toogle-theme/toogle-theme.component';
import { NavMenuComponent } from '@shared/ui/nav-menu/nav-menu.component';
import { ButtonComponent } from '@shared/ui/button/button.component';
import { NavigationService } from '@core/services/navigation.service';
import { OpenPanelService } from '@core/services/openpanel.service';
import { NavigationItem, isAnchor } from '@core/models/navigation.model';

@Component({
  selector: 'app-navigation',
  imports: [NgIcon, ToogleThemeComponent, NavMenuComponent, ButtonComponent, RouterLink],
  viewProviders: [provideIcons({ cssMenu, cssClose })],
  templateUrl: './navigation.component.html',
  styleUrl: './navigation.component.scss',
})
export class NavigationComponent {
  protected readonly navigationService = inject(NavigationService);
  private readonly op = inject(OpenPanelService);
  private readonly platformId = inject(PLATFORM_ID);

  readonly isMenuOpen = signal(false);
  protected readonly isAnchor = isAnchor;

  readonly loginItem: NavigationItem = { label: 'Login', type: 'route', target: '/login' };

  toggleMenu(): void {
    const next = !this.isMenuOpen();
    this.isMenuOpen.set(next);
    if (isPlatformBrowser(this.platformId)) {
      document.body.style.overflow = next ? 'hidden' : '';
    }
    this.op.track(next ? 'mobile_menu_open' : 'mobile_menu_close');
  }

  closeMenu(): void {
    this.isMenuOpen.set(false);
    if (isPlatformBrowser(this.platformId)) {
      document.body.style.overflow = '';
    }
  }

  onMobileNavClick(event: Event, item: NavigationItem): void {
    this.closeMenu();
    if (isAnchor(item)) {
      event.preventDefault();
      this.navigationService.navigate(item);
    }
  }
}
