import { type DarkTheme, isDarkTheme } from "./themes.ts";

export function usePreferredThemes() {
  // TODO: migrate theme preferences out of cosmetics to theme settings
  const cosmetics = useCosmetics();

  const dark = computed({
    get(): DarkTheme {
      const theme = cosmetics.value?.preferredDarkTheme;

      if (theme == null) {
        console.warn("[theme] cosmetics.preferredDarkTheme is not defined");
        return "dark";
      }

      if (!isDarkTheme(theme)) {
        console.warn(`[theme] cosmetics.preferredDarkTheme contains invalid value: ${theme}`);
        return "dark";
      }

      return theme;
    },
    set(value) {
      cosmetics.value.preferredDarkTheme = value;
    },
  });

  return reactive({
    dark,
    light: "light" as const,
  });
}