function darkModeListener() {
    document.querySelector("html").classList.toggle("dark");
    if (localStorage.theme == 'light') {
        localStorage.theme = 'dark';
    } else {
        localStorage.theme = 'light';
    }
}

document.querySelector("input[type='checkbox']#toogleTheme").addEventListener("click", darkModeListener);

if(localStorage.theme) {
    if (localStorage.theme == 'light') {
        if (document.querySelector("html").classList.contains('dark')) {
            document.querySelector("html").classList.toggle("dark");
        }
        document.getElementById("toogleTheme").checked = true;
    }
} else {
    // Default Dark Theme
    localStorage.theme = 'dark';
}

// Ability to disable blur effects for slower devices
const LOCAL_STORAGE_KEY = 'blur';
const blurCheckbox = document.querySelector("input[type='checkbox']#toggleBlur");

function setCSSFilter(selector, value) {
    document.querySelectorAll(selector).forEach(el => {
        el.style.backdropFilter = value
    });
}

function applyBlur(enabled) {
    if (!enabled) { 
        setCSSFilter('.backdrop-blur, .backdrop-blur-sm, .backdrop-blur-lg', 'none');
        return;
    }

    setCSSFilter('.backdrop-blur-lg', 'blur(16px)');
    setCSSFilter('.backdrop-blur',    'blur(8px)');
    setCSSFilter('.backdrop-blur-sm', 'blur(4px)');
}

function initBlurToggle() {
    const storedValue = localStorage.getItem(LOCAL_STORAGE_KEY);
    const enabled = storedValue === null ? true : storedValue === 'true';

    // initialize UI and DOM
    applyBlur(enabled);
    if (blurCheckbox) blurCheckbox.checked = enabled;

    // add event listener
    if (blurCheckbox) {
        blurCheckbox.addEventListener('click', (e) => {
            console.log("Received Event");
            const isEnabled = e.target.checked;
            applyBlur(isEnabled);
            localStorage.setItem(LOCAL_STORAGE_KEY, isEnabled ? 'true' : 'false');
        });
    }
}

initBlurToggle();