// Applies the stored theme override (see `settings-storage.ts`) by
// setting `data-theme="light"|"dark"` on `<html>`, cleared when the
// override is "system" (letting the `prefers-color-scheme` media
// query in `@hive/shared/colors.css` resume control). No palette
// values live here — `colors.css`'s own `:root[data-theme='light']` /
// `:root[data-theme='dark']` blocks are what actually apply the
// colours, by re-pointing at the same `--mocha-baseNN` /
// `--latte-baseNN` custom properties its media-query block already
// uses. This file only ever toggles the attribute; the values come
// from colors.css, not a duplicate copy here.
import { useEffect } from 'preact/hooks';
import { useLocalSetting } from './settings-storage.js';

export type ThemeOverride = 'system' | 'light' | 'dark';

export const THEME_OVERRIDE_KEY = 'swarm-ui:theme-override';

export function useThemeOverride() {
  return useLocalSetting<ThemeOverride>(THEME_OVERRIDE_KEY, 'system');
}

// Mounted once, high in the tree (`Shell`) — every route renders
// through one `<Shell>`, so one mount point applies the override
// regardless of which page is showing, and `useLocalSetting`'s
// same-tab subscription means `SettingsMenu` changing the value
// re-runs this effect without either component needing to know about
// the other directly.
export function useApplyThemeOverride(): void {
  const [override] = useThemeOverride();
  useEffect(() => {
    const root = document.documentElement;
    if (override === 'system') {
      delete root.dataset.theme;
    } else {
      root.dataset.theme = override;
    }
  }, [override]);
}