const body = document.body;
const darkModeToggle = document.getElementById('dark-mode-toggle');
const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
if (localStorage.getItem("colorscheme")) {
    setTheme(localStorage.getItem("colorscheme"))
} else if (body.classList.contains('colorscheme-light') || body.classList.contains('colorscheme-dark')) {
    setTheme(body.classList.contains("colorscheme-dark") ? "dark" : "light")
} else {
    setTheme(darkModeMediaQuery.matches ? "dark" : "light")
}
if (darkModeToggle) {
    darkModeToggle.addEventListener('click', () => {
        let theme = body.classList.contains("colorscheme-dark") ? "light" : "dark";
        setTheme(theme);
        rememberTheme(theme)
    })
}
darkModeMediaQuery.addListener((event) => {
    setTheme(event.matches ? "dark" : "light")
});
document.addEventListener("DOMContentLoaded", function() {
    let node = document.querySelector('.preload-transitions');
    node.classList.remove('preload-transitions')
});

function setTheme(theme) {
    body.classList.remove('colorscheme-auto');
    let inverse = theme === 'dark' ? 'light' : 'dark';
    body.classList.remove('colorscheme-' + inverse);
    body.classList.add('colorscheme-' + theme);
    document.documentElement.style['color-scheme'] = theme;

    function waitForElm(selector) {
        return new Promise(resolve => {
            if (document.querySelector(selector)) {
                return resolve(document.querySelector(selector))
            }
            const observer = new MutationObserver(mutations => {
                if (document.querySelector(selector)) {
                    resolve(document.querySelector(selector));
                    observer.disconnect()
                }
            });
            observer.observe(document.body, {
                childList: true,
                subtree: true
            })
        })
    }
    if (theme === 'dark') {
        const message = {
            type: 'set-theme',
            theme: 'github-dark'
        };
        waitForElm('.utterances-frame').then((iframe) => {
            iframe.contentWindow.postMessage(message, 'https://utteranc.es')
        })
    } else {
        const message = {
            type: 'set-theme',
            theme: 'github-light'
        };
        waitForElm('.utterances-frame').then((iframe) => {
            iframe.contentWindow.postMessage(message, 'https://utteranc.es')
        })
    }

    function sendMessage(message) {
        const iframe = document.querySelector('iframe.giscus-frame');
        if (!iframe) {
            return
        }
        iframe.contentWindow.postMessage({
            giscus: message
        }, 'https://giscus.app')
    }
    sendMessage({
        setConfig: {
            theme: theme
        }
    });
    const event = new Event('themeChanged');
    document.dispatchEvent(event)
}

function rememberTheme(theme) {
    localStorage.setItem('colorscheme', theme)
}