/**
 * The site's look is a style and a color scheme, which the client applies and
 * the emails render in. This module names them for both halves: the client's
 * `ThemeProvider` checks a stored choice against them, and the server checks
 * `GERBEUR_DEFAULT_STYLE` and picks an email's palette by them.
 *
 * @module
 */

/**
 * Lists every site style. Each has a stylesheet under `src/themes/`, keyed on
 * the root element's `data-style`, and an email style in `api/mail/styles.ts`.
 */
export const STYLE_NAMES = [
  "smooth",
  "brutalist",
  "geocities",
  "nyt",
  "kanagawa",
  "melange",
] as const;
/** One of the {@link STYLE_NAMES}. */
export type StyleName = typeof STYLE_NAMES[number];

/**
 * The style the stylesheets draw when the root element has no `data-style`,
 * and the one an unset or unknown `GERBEUR_DEFAULT_STYLE` means.
 */
export const BASE_STYLE: StyleName = "smooth";

/** Lists every color scheme. "auto" follows the system's. */
export const COLOR_SCHEMES = ["auto", "light", "dark"] as const;
/** One of the {@link COLOR_SCHEMES}. */
export type ColorScheme = typeof COLOR_SCHEMES[number];
/** The scheme of whoever hasn't picked one: the system's. */
export const DEFAULT_COLOR_SCHEME: ColorScheme = "auto";

/**
 * Checks whether `value` is a {@link StyleName}, as a stored choice or an
 * environment variable must be before it is applied.
 */
export function isStyleName(value: unknown): value is StyleName {
  return typeof value === "string" &&
    (STYLE_NAMES as readonly string[]).includes(value);
}

/** Checks whether `value` is a {@link ColorScheme}. */
export function isColorScheme(value: unknown): value is ColorScheme {
  return typeof value === "string" &&
    (COLOR_SCHEMES as readonly string[]).includes(value);
}