const light = require("!!raw-loader!@hibas123/theme/out/light.css").default;
const dark = require("!!raw-loader!@hibas123/theme/out/dark.css").default;

export enum ThemeStates {
    AUTO,
    LIGHT,
    DARK
}

let themeConfig: ThemeStates = Number(localStorage.getItem("theme"));
if (Number.isNaN(themeConfig))
    themeConfig = ThemeStates.AUTO;

let isDark = false;
let mediaIsDark = false;

if (window.matchMedia) {
    const mediaq = matchMedia("(prefers-color-scheme: dark)");
    mediaIsDark = mediaq.matches;
    mediaq.onchange = ev => {
        mediaIsDark = ev.matches;
        apply();
    }
    console.log(mediaq);
}


let styleElm: HTMLStyleElement;
function apply(force?: boolean) {
    let shouldDark = themeConfig === ThemeStates.AUTO ? mediaIsDark : themeConfig === ThemeStates.DARK;
    if (force || shouldDark !== isDark) {
        if (styleElm) styleElm.remove();
        styleElm = document.createElement("style");
        document.head.appendChild(styleElm);
        styleElm.innerHTML = shouldDark ? dark : light;
        isDark = shouldDark;
    }
}
apply(true);


function change(state: ThemeStates) {
    themeConfig = state;
    localStorage.setItem("theme", String(themeConfig));
    apply();
}

export default {
    active: () => themeConfig,
    change: (state: ThemeStates) => change(state)
}