/**
 * Header Component
 *
 * Handles language dropdown toggle on mobile/touch devices.
 */
export class Header {
    private langButton: HTMLElement | null;
    private langDropdown: HTMLElement | null;
    private headerEl: HTMLElement | null;
    private isDropdownOpen: boolean = false;
    private readonly scrollThreshold: number = 10;
    private lastScrollY: number = window.scrollY;

    constructor() {
        this.langButton = document.querySelector('.site-header__lang-btn');
        this.langDropdown = document.querySelector('.site-header__lang-dropdown');
        this.headerEl = document.querySelector('.site-header');

        this.init();
        this.initScrollBehavior();
    }

    private init(): void {
        if (!this.langButton || !this.langDropdown) {
            return;
        }

        // On mobile/touch devices, toggle dropdown on click
        if ('ontouchstart' in window || navigator.maxTouchPoints > 0) {
            this.langButton.addEventListener('click', (e: Event) => {
                e.preventDefault();
                this.toggleDropdown();
            });

            // Close dropdown when clicking outside
            document.addEventListener('click', (e: Event) => {
                const target = e.target as HTMLElement;
                if (!target.closest('.site-header__lang')) {
                    this.closeDropdown();
                }
            });
        }
    }

    /**
     * Toggle header background depending on scroll position
     */
    private initScrollBehavior(): void {
        if (!this.headerEl) return;

        const updateScrollState = (): void => {
            const currentScrollY = window.scrollY;
            const isScrolled = currentScrollY > this.scrollThreshold;
            this.headerEl?.classList.toggle('site-header--scrolled', isScrolled);

            const isScrollingDown = currentScrollY > this.lastScrollY;
            const shouldHide = isScrollingDown && currentScrollY > this.scrollThreshold;
            this.headerEl?.classList.toggle('site-header--hidden', shouldHide);

            this.lastScrollY = currentScrollY;
        };

        updateScrollState();
        window.addEventListener('scroll', updateScrollState, { passive: true });
    }

    /**
     * Toggle language dropdown
     */
    private toggleDropdown(): void {
        if (this.isDropdownOpen) {
            this.closeDropdown();
        } else {
            this.openDropdown();
        }
    }

    /**
     * Open language dropdown
     */
    private openDropdown(): void {
        if (!this.langDropdown) return;

        this.isDropdownOpen = true;
        this.langDropdown.style.opacity = '1';
        this.langDropdown.style.visibility = 'visible';
        this.langDropdown.style.transform = 'translateY(0)';
    }

    /**
     * Close language dropdown
     */
    private closeDropdown(): void {
        if (!this.langDropdown) return;

        this.isDropdownOpen = false;
        this.langDropdown.style.opacity = '0';
        this.langDropdown.style.visibility = 'hidden';
        this.langDropdown.style.transform = 'translateY(-10px)';
    }
}