/* eslint-disable react-hooks/rules-of-hooks */
//import type { FC, ReactNode } from 'react';
//import { createContext, useContext, useEffect, useState } from 'react';
import defaultTheme from "../../theme/default";
import { createContext, createEffect, createSignal, useContext } from "solid-js";
import windowExists from "../../helpers/window-exists";
export const ThemeContext = createContext({
    theme: defaultTheme,
});
export const ThemeProvider = (props) => {
    return <ThemeContext.Provider value={props.value}>{props.children}</ThemeContext.Provider>;
};
export function useTheme() {
    return useContext(ThemeContext);
}
export const useThemeMode = (usePreferences) => {
    const [mode, setMode] = createSignal("light");
    const savePreference = (mode) => localStorage.setItem("theme", mode);
    const getPreference = () => localStorage.getItem("theme") || getPrefersColorScheme();
    const userPreferenceIsDark = () => window.matchMedia?.("(prefers-color-scheme: dark)").matches;
    const getPrefersColorScheme = () => (userPreferenceIsDark() ? "dark" : "light");
    const toggleMode = () => {
        const newMode = mode() === "dark" ? "light" : "dark";
        setNewMode(newMode);
        setMode(newMode);
    };
    const setNewMode = (newMode) => {
        savePreference(newMode);
        if (!windowExists()) {
            return;
        }
        if (newMode === "dark") {
            document.documentElement.classList.add("dark");
            return;
        }
        document.documentElement.classList.remove("dark");
    };
    if (usePreferences) {
        createEffect(() => setMode(getPreference()));
        createEffect(() => setNewMode(mode()));
    }
    return [mode, setMode, toggleMode];
};