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 { RegionSelectorComponent } from '../region-selector/region-selector.component';
import { LangRoutePipe } from '../../pipes/lang-route.pipe';
import { TranslatePipe } from '../../i18n/translate.pipe';

@Component({
  selector: 'app-header',
  imports: [RouterLink, RouterLinkActive, LogoComponent, LanguageSelectorComponent, RegionSelectorComponent, LangRoutePipe, TranslatePipe],
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class HeaderComponent {
  cartItemCount;
  cartTotal;
  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;
    this.cartTotal = this.cartService.totalPrice;
  }

  get homeUrl(): string {
    return `/${this.langService.currentLanguage()}`;
  }

  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');
  }

  navigateHome(event?: Event): void {
    event?.preventDefault();
    this.closeMenu();

    const homeUrl = this.homeUrl;
    const currentUrl = this.router.url.split('?')[0].split('#')[0];

    if (currentUrl === homeUrl || currentUrl === `${homeUrl}/`) {
      this.document.defaultView?.scrollTo({ top: 0, behavior: 'smooth' });
      return;
    }

    this.router.navigateByUrl(homeUrl).then(() => {
      this.document.defaultView?.scrollTo({ top: 0, behavior: 'auto' });
    });
  }

  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);
    });
  }

  formatCartTotal(total: number): string {
    const locale = this.langService.currentLanguage() === 'en'
      ? 'en-US'
      : this.langService.currentLanguage() === 'hy'
        ? 'hy-AM'
        : 'ru-RU';
    const fractionDigits = Number.isInteger(total) ? 0 : 2;
    const amount = new Intl.NumberFormat(locale, {
      minimumFractionDigits: fractionDigits,
      maximumFractionDigits: 2,
    }).format(total);
    const currencySymbol = this.langService.getCurrentCurrency()?.symbol ?? this.langService.currentCurrency();

    return `${amount} ${currencySymbol}`;
  }
}