const lightModeIcon = '/images/nav/light-mode.svg';
const darkModeIcon = '/images/nav/dark-mode.svg';

function createToggleButton() {
    const button = document.createElement('button');
    button.id = 'theme-toggle';
    button.setAttribute('aria-label', 'Theme toggle');

    const icon = document.createElement('img');
    icon.id = 'theme-toggle--icon';
    icon.width = icon.height = 19;
    icon.alt = 'Theme toggle icon';

    button.appendChild(icon);
    button.addEventListener('click', toggleTheme);

    document.querySelector('nav').appendChild(button);
}

function toggleTheme() {
    const isDarkMode = document.querySelector('body').classList.toggle('dark-mode');

    const toggleIcon = document.getElementById('theme-toggle--icon');
    
    if (isDarkMode) {
        localStorage.setItem('prefersDarkMode', 'true');
        toggleIcon.src = darkModeIcon;
    } else {
        localStorage.setItem('prefersDarkMode', 'false');
        toggleIcon.src = lightModeIcon;
    }   
}

function initialize() {
    createToggleButton();

    const toggleIcon = document.getElementById('theme-toggle--icon');

    const prefersDarkMode = localStorage.getItem('prefersDarkMode');
    const noStoredPreference = prefersDarkMode === null;

    const mediaQuery = '(prefers-color-scheme: dark)';
    const browserPrefersDarkMode = window.matchMedia(mediaQuery).matches;

    if (noStoredPreference) {
        if (browserPrefersDarkMode) {
            toggleTheme();
        } else {
            toggleIcon.src = lightModeIcon
        }
    } else if (prefersDarkMode === 'true') {
        toggleTheme();
    } else if (prefersDarkMode === 'false') {
        toggleIcon.src = lightModeIcon
    }
}

initialize()