import { setLanguage, currentLang, t } from "../i18n.js";

/**
 * Sucht alle HTML-Elemente mir dem Attribut 'data-i18n'
 * und aktualisiert ihren Textinhalt basierend auf der aktuellen Sprache.
 */
export function updateTranslations() {
    const elements = document.querySelectorAll('[data-i18n]');
    elements.forEach(el => {
        const key = el.getAttribute('data-i18n');
        el.innerHTML = t(key);
    });
}

/**
 * Initialisiert alle Dropdowns und die Sprachauswahl. 
 * 
 * @param {Function} updatePlaceholdersCallback - Wird aufgrufen, wenn
 *                                                die Sprache gewechselt wurde, 
 *                                                um Platzhalter dynamisch anzupassen.
 */
export function initDropdowns(updatePlaceholdersCallback) {
    const langToggle = document.getElementById('lang-toggle');
    const langMenu = document.getElementById('lang-menu');
    const userToggle = document.getElementById('user-toggle');
    const userMenu = document.getElementById('user-menu');

    const closeAllDropdowns = () => {
        if (langMenu) langMenu.classList.remove('show');
        if (userMenu) userMenu.classList.remove('show');
    };

    if (langToggle && langMenu) {
        langToggle.onclick = (e) => {
            e.stopPropagation();
            const isShowing = langMenu.classList.contains('show');
            closeAllDropdowns();
            if (!isShowing) langMenu.classList.add('show');
        };
        langMenu.onclick = (e) => e.stopPropagation();
    }

    if (userToggle && userMenu) {
        userToggle.onclick = (e) => {
            e.stopPropagation();
            const isShowing = userMenu.classList.contains('show');
            closeAllDropdowns();
            if (!isShowing) userMenu.classList.add('show');
        };
        userMenu.onclick = (e) => e.stopPropagation();
    }

    document.addEventListener('click', closeAllDropdowns);

    if (langMenu) {
        const langItems = langMenu.querySelectorAll('.dropdown-item');
        langItems.forEach(item => {
            item.onclick = () => {
                const selectedLang = item.getAttribute('data-lang');
                
                document.getElementById('current-lang-text').textContent = selectedLang.toUpperCase();
                document.getElementById('current-flag').textContent = item.querySelector('.flag-icon').textContent;
                
                setLanguage(selectedLang);
                updateTranslations();

                if (updatePlaceholdersCallback) {
                    updatePlaceholdersCallback();
                }
                
                closeAllDropdowns();
            };
        });
    }

    const btnLogout = document.getElementById('btn-logout');
    if (btnLogout) {
        btnLogout.onclick = () => {
            sessionStorage.removeItem('void_access_token');
            sessionStorage.removeItem('void_refresh_token');
            localStorage.removeItem('void_refresh_token');
            sessionStorage.removeItem('void_user');
            window.location.reload();
        };
    }

    if (langMenu) {
        const activeLangItem = langMenu.querySelector(`.dropdown-item[data-lang="${currentLang}"]`);
        if (activeLangItem) {
            const flag = activeLangItem.querySelector('.flag-icon').textContent;
            const langText = document.getElementById('current-lang-text');
            const flagIcon = document.getElementById('current-flag');
            
            if (langText) langText.textContent = currentLang.toUpperCase();
            if (flagIcon) flagIcon.textContent = flag;
        }
    }
}