class ColorScheme {

    static #localStorageKey = 'color_scheme'
    static options = ['dark', 'light']

    static set scheme(name) {
        document.documentElement.setAttribute('data-color-scheme', name)
        localStorage.setItem(this.#localStorageKey, name)
    }

    static get scheme() {
        return document.documentElement.dataset.colorScheme
    }

    static {
        if (localStorage.getItem(this.#localStorageKey)) {
            // user has previously made a manual color scheme selection
            ColorScheme.scheme = localStorage.getItem(this.#localStorageKey)
        } else if (window.matchMedia('(prefers-color-scheme: light)').matches === true) {
            // user has not made a manual color scheme selection and has a 'light' preference
            ColorScheme.scheme = 'light'
        } else if (window.matchMedia('(prefers-color-scheme: dark)').matches === true) {
            // user has not made a manual color scheme selection and has a 'dark' preference
            ColorScheme.scheme = 'dark'
        } else {
            ColorScheme.scheme = ColorScheme.options[0]
        }

        const nextSchemeBtns = document.querySelectorAll('[data-color-scheme-next]')
        for (const btn of nextSchemeBtns) {
            btn.addEventListener('click', ColorScheme.next)
        }

        const setSchemeBtns = document.querySelectorAll('[data-color-scheme-set]')
        for (const btn of setSchemeBtns) {
            btn.addEventListener('click', () => { ColorScheme.scheme = btn.dataset.colorSchemeSet })
        }
    }

    static next() {
        const optionPos = ColorScheme.options.indexOf(ColorScheme.scheme) + 1
        if (optionPos === ColorScheme.options.length) {
            ColorScheme.scheme = ColorScheme.options[0]
        } else {
            ColorScheme.scheme = ColorScheme.options[optionPos]
        }
    }
}