export type ThemeMode = "light" | "dark" | "auto";

const STORAGE_KEY = "app-theme-mode";

export function useTheme() {
  const prefersDark = usePreferredDark();
  const theme = useStorage<ThemeMode>(STORAGE_KEY, "auto");

  const isDark = computed(() => {
    if (theme.value === "auto") {
      return prefersDark.value;
    }
    return theme.value === "dark";
  });

  watch(isDark, (dark) => {
    if (dark) {
      document.documentElement.classList.toggle("ion-palette-dark", dark);
      document.documentElement.classList.remove("ion-palette-light");
    }
    else {
      document.documentElement.classList.remove("ion-palette-dark");
      document.documentElement.classList.add("ion-palette-light");
    }
  }, { immediate: true });

  return {
    theme,
    isDark,
  };
}