import {_get, postJson} from "./Request.js";
import {loading} from "./Notiflix.js";

/**
 * İki harfli ISO ülke koduna ve dil koduna dayanarak bir ülkenin görüntülenen adını döndürür.
 * @param {string} countryCode İki harfli ISO ülke kodu.
 * @param {string} [local="tr"] Görüntülenen ad için dil kodu.
 * @returns {string} Ülkenin görüntülenen adı.
 */
function getCountryName(countryCode, local = "tr") {
    const displayNames = new Intl.DisplayNames([local], {
        type: "region",
    })
    return displayNames.of(countryCode)
}

const languagesChanges = () => {
    const Countries = document.getElementById("countries");
    const flag = document.getElementById("flag");

    const flagCode = flag.dataset.lang
    const flagSvgCode = flag.children[0].alt.toUpperCase();
    flag.children[0].src = `assets/admin/images/flags/${flagSvgCode}.svg`
    const langCode = flag.children[0].alt.toUpperCase() === "EN" ? "US" : flag.children[0].alt.toUpperCase();
    flag.children[0].alt = getCountryName(langCode, flagCode);
    [...Countries.children].forEach(country => {
        country.addEventListener("click", (e) => {
            let langCode
            if (e.target.alt !== undefined) {
                langCode = e.target.alt === "EN" ? "US" : e.target.alt;
            } else {
                langCode = e.target.lastElementChild.alt;
            }
            if (langCode!==undefined) {
                loading(true)
                const flagSvgCode = langCode === "US" ? "EN" : langCode;
                flag.children[0].src = `assets/admin/images/flags/${flagSvgCode}.svg`
                flag.children[0].alt = getCountryName(langCode, flagCode)
                postJson("api/LangChanges", {
                    lang: flagSvgCode.toLowerCase()
                }).then(() => {
                    loading(false)
                    window.location.reload()
                })
            }
        })
    });
}

const themeMode = () => {
    const themeModeRadios = document.querySelectorAll("input[name='themeMode']")
    themeModeRadios.forEach(themeModeRadio => {
        themeModeRadio.addEventListener("click", async (evt) => {
            await postJson("api/ThemeMode", {
                themeMode: evt.target.value
            })
            const body = document.querySelector("body")
            const table=document.querySelector(".js-basic-example")
            if (table!==undefined && table!==null) {
                if (body.classList.contains("theme-dark")) {
                    table.classList.add("text-white")
                } else {
                    table.classList.remove("text-white")
                }
            }
        })
    })
}
const themeColor = () => {
    const themeColors = document.querySelectorAll(".choose-skin")[0];
    const colorsLi = [...themeColors.children]
    colorsLi.forEach(themeColor => {
        themeColor.addEventListener("click", async () => {
            const color = themeColor.dataset.theme;
            if (color !== undefined) {
                await postJson("api/ThemeColor", {
                    themeColor: color
                })
            }
        })
    })
}

const dataTables=(serverRequest={})=>{
    window.addEventListener("load",()=>{
        const body = document.querySelector("body")
        const html = document.querySelector("html")
        let langPath=''
        if(html.lang.includes("tr")) {
            langPath='assets/admin/plugins/jquery-datatable/Turkish.json'
        }
        const table=document.querySelector(".js-basic-example")
        if (body.classList.contains("theme-dark")) {
            table.classList.add("text-white")
        } else {
            table.classList.remove("text-white")
        }

        $('.js-basic-example').DataTable({
            language: {
                url: langPath,
            },
            ...serverRequest
        });
    });
}

const dataTablesReload =() => {
    $('.js-basic-example').DataTable().ajax.reload();
}


const customLang = async (locations,page) => {
    const lang=document.querySelector("html").lang;
    return await _get(`App/languages/${lang}.json`).then(data => data[locations][page].custom);
}


export {languagesChanges, themeMode, themeColor, dataTables,dataTablesReload, customLang,}
