document.addEventListener("DOMContentLoaded", async () => {
    while (!window.langDB && !window.lang) {
        await new Promise(resolve => setTimeout(resolve, 50)); // Ждем, пока langDB будет определен
    }
    //alert(JSON.stringify(langDB[0])) //{"en":"English","ru":"Русский"}

const langs = window.langDB[0];

(()=>{
    const data = function (langs){
        return `
        <style>
            #lang-select {
                cursor: pointer;
            }
            .dropdown-item {
                margin: 10px;
                border-bottom: solid 1px gray;
                cursor: pointer;
            }
            #current-lang {
                font-size: 4vh;
            }
        </style>
        <div class="border border-gray-300 rounded-lg shadow padding-md flex flex-column align-center items-center" >
        <span id="lang-select"class="item-lonely text-center">${_('Ваш язык')}: <p><underline><span id="current-lang">русский</span></underline></p> <p><underline>(Change language?)</underline></p></p> </span>
        <div id="lang-dropdown" class="dropdown hidden flex flex-column align-center">
            ${Object.entries(langs).map(i=>('<div class="dropdown-item" onclick="langChange(this.innerText);">'+i[1]+'</div>')).join('\n')}
        </div>
        
    </div>
    `};

    document.getElementById('Langs').innerHTML = data(langs);

})();


    document.getElementById('current-lang').innerText = langs[window.lang];
    document.getElementById('lang-select').addEventListener('click',function(){
        document.getElementById('lang-dropdown').classList.remove('hidden')
    })

});

function langChange(value){
    document.getElementById('current-lang').innerText = value;
    document.getElementById('lang-dropdown').classList.add('hidden');
    const targetLang = Object.entries(window.langDB[0]).find(i=>i[1]==value)[0];
    window.location.href = window.location.href.replace('/'+window.lang+'','').replace(window.location.origin,window.location.origin+'/'+targetLang+'')
}