import { useEffect } from 'react';
import type { Appearance } from '../lib/theme/window';
import {
  getAppearance,
  setAppearance,
  subscribeToPreferredAppearanceChange,
} from '../lib/theme/window';
import { useKeyValue } from './useKeyValue';

export function useTheme() {
  const appearanceKv = useKeyValue<Appearance>({
    key: 'appearance',
    defaultValue: getAppearance(),
  });

  const themeChange = (appearance: Appearance) => {
    appearanceKv.set(appearance);
  };

  const handleToggleAppearance = async () => {
    appearanceKv.set(appearanceKv.value === 'dark' ? 'light' : 'dark');
  };

  // Set appearance when preferred theme changes
  useEffect(() => subscribeToPreferredAppearanceChange(themeChange), []);

  // Sync appearance when k/v changes
  useEffect(() => setAppearance(appearanceKv.value), [appearanceKv.value]);

  return {
    appearance: appearanceKv.value,
    toggleAppearance: handleToggleAppearance,
  };
}