document.addEventListener("DOMContentLoaded", () => {
    const darkModeButton = document.getElementById("dark-mode-toggle");
    const mobileDarkModeButton = document.getElementById("dark-mode-toggle-mobile");
    const body = document.body;

    function toggleDarkMode(save){
        const isLightMode = body.classList.toggle("light-mode");
        darkModeButton.innerHTML = isLightMode ? '<i class="fa-solid fa-sun"></i>' : '<i class="fa-solid fa-moon"></i>';
    
        if (save){
            localStorage.setItem("theme", isLightMode ? "light" : "dark");
        }
    }

    // Load Dark Mode preference from cache
    const theme = localStorage.getItem("theme");
    if (theme === "light"){
        body.classList.add("light-mode");
        darkModeButton.innerHTML = '<i class="fa-solid fa-sun"></i>';
    }

    darkModeButton.addEventListener("click", () => {
        toggleDarkMode(true);
    })

    mobileDarkModeButton.addEventListener("click", () => {
        toggleDarkMode(true);
    })

    // Add/remove scrolled style to header
    window.addEventListener("scroll", () => {
        const header = document.querySelector("header");

        if (window.scrollY === 0){
            header.classList.remove("scrolled");
        } else {
            header.classList.add("scrolled");
        }
    })

    // Mobile Nav
    const mobileNavButton = document.getElementById("mobile-nav-toggle");
    const mobileNav = document.getElementById("mobile-nav");

    mobileNavButton.addEventListener("click", () => {
        mobileNav.classList.toggle("active");
    })

    document.addEventListener("click", function(event) {
        const isInsideMobileNav = mobileNav.contains(event.target);
        const isClickToggle = mobileNavButton.contains(event.target);

        if (!isInsideMobileNav && !isClickToggle){
            mobileNav.classList.remove("active");
        }
    })

    document.addEventListener("touchstart", function(event) {
        const isInsideMobileNav = mobileNav.contains(event.target);
        const isClickToggle = mobileNavButton.contains(event.target);

        if (!isInsideMobileNav && !isClickToggle){
            mobileNav.classList.remove("active");
        }
    })

    const mobileNavLinks = mobileNav.querySelectorAll("a");
    mobileNavLinks.forEach(link => {
        link.addEventListener("click", () => {
            mobileNav.classList.remove("active");
        })
    })
})

// Language support
async function getLanguageData(lang){
    const response = await fetch(`languages/${lang}.json`);
    return response.json();
}

document.addEventListener("DOMContentLoaded", async () => {
    const userLang = navigator.language || navigator.userLanguage;
    const langData = await getLanguageData(userLang);

    document.querySelectorAll("[data-i18n]").forEach((element) => {
        const key = element.getAttribute("data-i18n");
        element.innerHTML = langData[key];
    });
})