/**
 * Shares the chosen theme with every component. `ThemeProvider` fills this
 * context and `useTheme` reads it.
 *
 * @module
 */

import { createContext } from "react";
import {
  BASE_STYLE,
  type ColorScheme,
  DEFAULT_COLOR_SCHEME,
  type StyleName,
} from "../../../shared/theme.ts";

/**
 * Provided by `ThemeProvider` to `useTheme`. A setter applies the choice and
 * stores it in this browser, and in the account's settings when signed in.
 */
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: BASE_STYLE,
  colorScheme: DEFAULT_COLOR_SCHEME,
  setStyle: () => {},
  setColorScheme: () => {},
});