import type { Theme } from "./themes.ts";

interface ThemeSettings {
  preference: Theme | "system";
  value: Theme;
}

export function useThemeSettings(getDefaultTheme?: () => Theme) {
  getDefaultTheme ??= () => "dark";

  const $settings = useCookie<ThemeSettings>("color-mode", {
    maxAge: 60 * 60 * 24 * 365 * 10,
    sameSite: "lax",
    secure: true,
    httpOnly: false,
    path: "/",
  });

  // reset theme settings to a default value if the cookie is missing or contains invalid value
  if ($settings.value == null || typeof $settings.value !== "object") {
    $settings.value = {
      preference: "system",
      value: getDefaultTheme(),
    };
  }

  return reactive({
    preferred: computed({
      get: () => $settings.value.preference ?? "system",
      set: (value) => ($settings.value.preference = value),
    }),

    active: computed({
      get: () => $settings.value.value ?? getDefaultTheme(),
      set: (value) => ($settings.value.value = value),
    }),
  });
}