/* Toggle Dark/Light Mode */
function initThemeToggle() {
    const rootHtml = document.documentElement;
    const toggleThemeBtn = document.getElementById("theme-toggle");

    // If no saved theme, determine user preference, otherwise default to light
    const savedTheme = localStorage.getItem("theme");
    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
    const initialTheme = savedTheme ?? (prefersDark ? "dark" : "light");

    function setTheme(theme) {
        const isDarkMode = theme === "dark";
        // toggleThemeBtn dataset comes with translated labels for site's language
        const label = isDarkMode ? toggleThemeBtn.dataset.labelLight : toggleThemeBtn.dataset.labelDark;

        rootHtml.setAttribute("data-theme", theme);
        toggleThemeBtn.setAttribute("aria-label", label); // display handled by CSS
    }

    // Apply initial theme
    setTheme(initialTheme);

    // Change theme on click and save user's choice
    toggleThemeBtn.addEventListener("click", () => {
        const newTheme = rootHtml.getAttribute("data-theme") === "dark" ? "light" : "dark";
        setTheme(newTheme);
        localStorage.setItem("theme", newTheme);
     });
}

export default initThemeToggle;