import { useEffect, useMemo, useState } from "preact/hooks";
import {
  applyThemeToDocument,
  DEFAULT_THEME,
  getStoredThemeName,
  THEME_OPTIONS,
  THEME_STORAGE_KEY,
  type ThemeName,
} from "./themes";

export function useThemePreference() {
  const [themeName, setThemeName] = useState<ThemeName>(() => {
    if (typeof window === "undefined") return DEFAULT_THEME;
    return getStoredThemeName();
  });

  useEffect(() => {
    applyThemeToDocument(themeName);
    window.localStorage.setItem(THEME_STORAGE_KEY, themeName);
  }, [themeName]);

  return useMemo(
    () => ({
      themeName,
      themeOptions: THEME_OPTIONS,
      setThemeName,
    }),
    [themeName],
  );
}