document.addEventListener("DOMContentLoaded", function() {
    var modeSwitcher = document.getElementById("mode-switcher");
    var templateBodyClass = document.body;

    // Function to set a cookie
    function setCookie(name, value, days) {
        var expires = "";
        if (days) {
            var date = new Date();
            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
            expires = "; expires=" + date.toUTCString();
        }
        document.cookie = name + "=" + value + expires + "; path=/";
    }

    // Function to get a cookie
    function getCookie(name) {
        var getname = name + "=";
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = cookies[i];
            while (cookie.charAt(0) === ' ') {
                cookie = cookie.substring(1, cookie.length);
            }
            if (cookie.indexOf(getname) === 0) {
                return cookie.substring(getname.length, cookie.length);
            }
        }
        return null;
    }

    // Check if a site-mode cookie exists and set the mode accordingly
    var modeCookie = getCookie("site-mode");
    if (modeCookie) {
        if (modeCookie === "dark-mode") {
            // Set dark mode
            modeSwitcher.classList.remove("light-mode");
            modeSwitcher.classList.add("dark-mode");
            modeSwitcher.setAttribute("data-site-mode", "dark-mode");
            templateBodyClass.classList.remove('site-mode--light-mode');
            templateBodyClass.classList.add('site-mode--dark-mode');
        } else {
            // Set light mode (or default)
            modeSwitcher.classList.remove("dark-mode");
            modeSwitcher.classList.add("light-mode");
            modeSwitcher.setAttribute("data-site-mode", "light-mode");
            templateBodyClass.classList.remove('site-mode--dark-mode');
            templateBodyClass.classList.add('site-mode--light-mode');
        }
    }
    
    // Add click event listener to mode switcher
    modeSwitcher.addEventListener("click", function(e) {
        e.preventDefault();
        var currentMode = modeSwitcher.getAttribute("data-site-mode");

        if (currentMode === "light-mode") {
            // Switch to dark mode
            setCookie("site-mode", "dark-mode", 1); 
            modeSwitcher.classList.remove("light-mode");
            modeSwitcher.classList.add("dark-mode");
            modeSwitcher.setAttribute("data-site-mode", "dark-mode");
            templateBodyClass.classList.remove('site-mode--light-mode');
            templateBodyClass.classList.add('site-mode--dark-mode');
        } else {
            // Switch to light mode
            setCookie("site-mode", "light-mode", 1); 
            modeSwitcher.classList.remove("dark-mode");
            modeSwitcher.classList.add("light-mode");
            modeSwitcher.setAttribute("data-site-mode", "light-mode");
            templateBodyClass.classList.remove('site-mode--dark-mode');
            templateBodyClass.classList.add('site-mode--light-mode');
        }
    });
});
