import { Component, ChangeDetectionStrategy, Renderer2, inject, DOCUMENT } from '@angular/core';
import { Router, RouterLink, RouterLinkActive } from '@angular/router';
import { CartService } from '../../services';
import { environment } from '../../../environments/environment';
import { LogoComponent } from '../logo/logo.component';
import { LanguageSelectorComponent } from '../language-selector/language-selector.component';

@Component({
  selector: 'app-header',
  imports: [RouterLink, RouterLinkActive, LogoComponent, LanguageSelectorComponent],
  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);

  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 {
    this.router.navigate(['/search']);
  }

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