import { showDialog, addQueryParam, removeQueryParam } from '../../tools/main.js';
import { loadPopupTexts, getUiLabels, getPopupText } from '../../i18n/main.js';

const showChangeLanguagePopup = async function () {
    await loadPopupTexts('set-client-language');
    showDialog(document.querySelector('#popup-set-client-language'), [
        function () {
            history.pushState(null, '', removeQueryParam(window.location.href, 'popup'));
        }
    ], true);
    const languageNames = (await getUiLabels()).LANGUAGES;
    const languageList = document.querySelector('#popup-set-client-language-language-list');
    languageList.innerHTML = '';
    const adaptToDevideItem = document.createElement('li');
    adaptToDevideItem.role = 'button';
    adaptToDevideItem.textContent = await getPopupText('set-client-language', '23a2c8c49e0e46c7bdbeb7444f63cdd3', 0);
    adaptToDevideItem.classList.add('item');
    adaptToDevideItem.onclick = async function () {
        if (typeof (Storage) !== 'undefined') {
            localStorage.removeItem('lang');
        };
        window.location.href = removeQueryParam(removeQueryParam(window.location.href, 'lang'), 'popup');
    };
    languageList.appendChild(adaptToDevideItem)
    for (const [langCode, langName] of Object.entries(languageNames)) {
        console.log(langCode, langName);
        const listItem = document.createElement('li');
        listItem.role = 'button';
        listItem.textContent = langName;
        listItem.classList.add('item');
        if (langCode === window.LANGUAGE) {
            listItem.dataset.disabled = 'disabled';
        } else {
            listItem.onclick = async function () {
                window.location.href = addQueryParam(removeQueryParam(window.location.href, 'popup'), 'lang', langCode);
            };
        };
        languageList.appendChild(listItem);
    };
};

export { showChangeLanguagePopup };