import { getLocale, translate } from '@app/i18n'
import type { Palette, PaletteMode } from '@app/lib'
import { createContext, useContext } from 'react'

/**
 * The appearance contract every themed surface reads from: which palette is
 * painted, which light/dark variant is live, and the base64 CSS payload that
 * produced it.
 */
export interface ThemeContextValue {
  palette: Palette
  paletteId: string
  /** Requested mode (the `.dark` class state). */
  mode: PaletteMode
  /** Variant the palette actually rendered in. */
  variant: PaletteMode
  /** Base64 of the injected stylesheet, as persisted locally. */
  encoded: string
  palettes: Palette[]
  setPalette: (id: string) => void
  resetPalette: () => void
  setMode: (mode: PaletteMode) => void
}

export const ThemeContext = createContext<ThemeContextValue | null>(null)

export function useThemeContext(): ThemeContextValue {
  const value = useContext(ThemeContext)
  if (!value) throw new Error(translate(getLocale(), 'ui.themeContextMissing'))
  return value
}