import('bootstrap');

document.addEventListener('DOMContentLoaded', () => {
    const themeToggle = document.getElementById('theme-toggle') as HTMLInputElement | null;
    const lightOption = document.querySelector('.mode-option.light-mode') as HTMLElement;
    const darkOption = document.querySelector('.mode-option.dark-mode') as HTMLElement;

    const applyTheme = (isLight: boolean) => {
        document.documentElement.classList.toggle('white-theme', isLight);
        localStorage.setItem('theme', isLight ? 'white-theme' : '');
        if (themeToggle) {
            themeToggle.checked = isLight;
        }

        lightOption.classList.toggle('active', isLight);
        darkOption.classList.toggle('active', !isLight);
    };

    if (themeToggle) {
        const currentTheme = localStorage.getItem('theme');
        const isLight = currentTheme === 'white-theme';
        applyTheme(isLight);

        lightOption.addEventListener('click', () => applyTheme(true));
        darkOption.addEventListener('click', () => applyTheme(false));
    } else {
        const currentTheme = localStorage.getItem('theme');
        if (currentTheme) {
            document.documentElement.classList.add(currentTheme);
        }
    }
});