const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;

function setTheme(mode) {
    if (mode !== "light" && mode !== "dark" && mode !== "auto") {
        mode = "auto";
    }

    var themeToggleAutoIcon = document.getElementById('theme-icon-when-auto');
    var themeToggleDarkIcon = document.getElementById('theme-icon-when-dark');
    var themeToggleLightIcon = document.getElementById('theme-icon-when-light');

    themeToggleAutoIcon.classList.add('hidden');
    themeToggleDarkIcon.classList.add('hidden');
    themeToggleLightIcon.classList.add('hidden');

    if (mode === "dark") {
        themeToggleDarkIcon.classList.remove('hidden');
        document.documentElement.classList.add('dark');
    } else if (mode === "auto") {
        themeToggleAutoIcon.classList.remove('hidden');

        if(prefersDark) {
            document.documentElement.classList.add('dark');
        }
        else {
            document.documentElement.classList.remove('dark');
        }
    } else {
        document.documentElement.classList.remove('dark');
        themeToggleLightIcon.classList.remove('hidden');
    }

    localStorage.setItem('color-theme', mode);
}

function cycleTheme() {
    const currentTheme = localStorage.getItem('color-theme') || "auto";

    if (prefersDark) {
        // Auto (dark) -> Light -> Dark
        if (currentTheme === "auto") {
            setTheme("light");
        } else if (currentTheme === "light") {
            setTheme("dark");
        } else {
            setTheme("auto");
        }
    } else {
        // Auto (light) -> Dark -> Light
        if (currentTheme === "auto") {
            setTheme("dark");
        } else if (currentTheme === "dark") {
            setTheme("light");
        } else {
            setTheme("auto");
        }
    }
}

function initTheme() {
    // set theme defined in localStorage if there is one, or fallback to auto mode
    const currentTheme = localStorage.getItem('color-theme');
    currentTheme ? setTheme(currentTheme) : setTheme("auto");
}

function setupTheme() {
    // Attach event handlers for toggling themes
    let buttons = document.getElementsByClassName("theme-toggle");
    for (var i = 0; i < buttons.length; i++) {
        buttons[i].addEventListener("click", cycleTheme);
    };
}


initTheme();

document.addEventListener('DOMContentLoaded', function() {
    setupTheme();
})