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

document.querySelectorAll("input[type='checkbox']#toogleTheme").forEach((toggle) => toggle.addEventListener("click", darkModeListener));

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

        document.querySelectorAll("#toogleTheme").forEach((toggle) => {
            toggle.checked = true;
        });
        
    }
} else {
    // Default Dark Theme
    localStorage.theme = 'dark';
}

// Ability to disable blur effects for slower devices
const LOCAL_STORAGE_KEY = 'blur';

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, .backdrop-blur-xl, .backdrop-blur-2xl', 'none');
        return;
    }

    setCSSFilter('.backdrop-blur-2xl', 'blur(40px)');
    setCSSFilter('.backdrop-blur-xl',    'blur(24px)');
    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';

    const blurCheckboxes = document.querySelectorAll("input[type='checkbox']#toggleBlur");

    // initialize UI and DOM
    applyBlur(enabled);
    blurCheckboxes.forEach((checkbox) => {
        checkbox.checked = enabled;
    });

    // add event listener
    blurCheckboxes.forEach((checkbox) => {
        checkbox.addEventListener('click', (e) => {
            const isEnabled = e.target.checked;
            applyBlur(isEnabled);
            localStorage.setItem(LOCAL_STORAGE_KEY, isEnabled ? 'true' : 'false');
        });
    });
}

initBlurToggle();