import { useEffect, useState } from 'react';
import { computeThemeValue } from '../utils/compute-theme-value';
import type { RtTheme } from '../rt-frame.types';

export function useComputedMediaTheme() {
  const [computedThemeMediaValue, setComputedThemeMediaValue] = useState<
    Exclude<RtTheme, 'auto'>
  >(computeThemeValue('auto'));

  useEffect(() => {
    const onThemeChange = () => {
      setComputedThemeMediaValue(computeThemeValue('auto'));
    };
    if (
      typeof window !== 'undefined' &&
      typeof window.matchMedia !== 'undefined'
    ) {
      onThemeChange();
      window
        .matchMedia('(prefers-color-scheme: dark)')
        .addEventListener('change', onThemeChange);
    }
    return () => {
      if (
        typeof window !== 'undefined' &&
        typeof window.matchMedia !== 'undefined'
      ) {
        window
          .matchMedia('(prefers-color-scheme: dark)')
          .removeEventListener('change', onThemeChange);
      }
    };
  }, []);

  return { computedThemeMediaValue };
}