/**
 * Declares the theme's React context. `ThemeProvider` fills it and `useTheme`
 * reads it.
 *
 * @module
 */

import { createContext } from "react";

/**
 * Every site style, which `ThemeProvider` checks a stored choice against. Each
 * has a stylesheet under `src/themes/`, keyed on the root element's
 * `data-style`, which is absent for "smooth".
 */
export const STYLE_NAMES = [
  "smooth",
  "brutalist",
  "geocities",
  "nyt",
  "kanagawa",
  "melange",
] as const;
/** One of {@link STYLE_NAMES}. */
export type StyleName = typeof STYLE_NAMES[number];

/** Every color scheme; "auto" follows the system's. */
export const COLOR_SCHEMES = ["auto", "light", "dark"] as const;
/** One of {@link COLOR_SCHEMES}. */
export type ColorScheme = typeof COLOR_SCHEMES[number];

/**
 * Provided by `ThemeProvider` to `useTheme`. A setter applies and stores the
 * choice for this browser.
 */
export interface ThemeContextValue {
  style: StyleName;
  colorScheme: ColorScheme;
  setStyle(s: StyleName): void;
  setColorScheme(c: ColorScheme): void;
}

/** The theme's context. Its default is only seen outside `ThemeProvider`. */
export const ThemeContext: React.Context<ThemeContextValue> = createContext<
  ThemeContextValue
>({
  style: "smooth",
  colorScheme: "auto",
  setStyle: () => {},
  setColorScheme: () => {},
});