import { UpperCasePipe } from '@angular/common';
import { Component, HostListener, inject, signal } from '@angular/core';
import { RouterLink } from '@angular/router';
import { TranslatePipe } from '../translate/translate.pipe';
import { TranslationService, Lang } from '../translate/translation.service';

interface LangOption { code: Lang; label: string; flag: string; }

@Component({
  selector: 'app-site-header',
  imports: [RouterLink, TranslatePipe, UpperCasePipe],
  templateUrl: './site-header.html',
  styleUrl: './site-header.scss'
})
export class SiteHeader {
  private i18n = inject(TranslationService);

  menuOpen = signal(false);
  langOpen = signal(false);
  currentLang = this.i18n.currentLang;

  langs: LangOption[] = [
    { code: 'ru', label: 'Русский', flag: '/flags/ru.svg' },
    { code: 'en', label: 'English', flag: '/flags/en.svg' },
    { code: 'hy', label: 'Հայերեն', flag: '/flags/arm.svg' },
  ];

  get activeLang(): LangOption {
    return this.langs.find(l => l.code === this.currentLang()) ?? this.langs[0];
  }

  toggleMenu(): void { this.menuOpen.update(v => !v); }
  closeMenu(): void { this.menuOpen.set(false); }
  toggleLang(): void { this.langOpen.update(v => !v); }
  closeLang(): void { this.langOpen.set(false); }

  setLang(lang: Lang): void {
    this.i18n.setLanguage(lang);
    this.langOpen.set(false);
  }

  @HostListener('document:click', ['$event.target'])
  onDocClick(target: EventTarget | null): void {
    if (!(target instanceof HTMLElement) || !target.closest('.lang-select')) {
      this.langOpen.set(false);
    }
  }
}