import { Component, ChangeDetectionStrategy, Renderer2, inject, DOCUMENT } from '@angular/core';
import { Router, RouterLink, RouterLinkActive } from '@angular/router';
import { CartService, LanguageService } from '../../services';
import { environment } from '../../../environments/environment';
import { LogoComponent } from '../logo/logo.component';
import { LanguageSelectorComponent } from '../language-selector/language-selector.component';
import { LangRoutePipe } from '../../pipes/lang-route.pipe';
import { TranslatePipe } from '../../i18n/translate.pipe';

@Component({
  selector: 'app-header',
  imports: [RouterLink, RouterLinkActive, LogoComponent, LanguageSelectorComponent, LangRoutePipe, TranslatePipe],
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class HeaderComponent {
  cartItemCount;
  menuOpen = false;
  brandName = environment.brandFullName;
  logo = environment.logo;
  isnovo = environment.theme === 'novo';

  private renderer = inject(Renderer2);
  private document = inject(DOCUMENT);
  private langService = inject(LanguageService);

  constructor(private cartService: CartService, private router: Router) {
    this.cartItemCount = this.cartService.itemCount;
  }

  toggleMenu(): void {
    this.menuOpen = !this.menuOpen;
    if (this.menuOpen) {
      this.renderer.addClass(this.document.body, 'dexar-menu-open');
    } else {
      this.renderer.removeClass(this.document.body, 'dexar-menu-open');
    }
  }

  closeMenu(): void {
    this.menuOpen = false;
    this.renderer.removeClass(this.document.body, 'dexar-menu-open');
  }

  navigateToSearch(): void {
    const lang = this.langService.currentLanguage();
    this.router.navigate([`/${lang}/search`]);
  }

  navigateToCatalog(): void {
    this.closeMenu();
    const lang = this.langService.currentLanguage();
    this.router.navigate([`/${lang}`]).then(() => {
      setTimeout(() => {
        this.document.getElementById('catalog')?.scrollIntoView({ behavior: 'smooth' });
      }, 100);
    });
  }
}