import { ThemeMode, useThemeConfig } from '@/components/Layout/ThemeProvider';
import { useEffect, useRef, useState } from 'react';

/**
 * This hook is a listener for system theme changes (when automatic mode theme is enabled).
 *
 * @returns {ThemeMode} theme
 */
function useSystemTheme(): ThemeMode {
  const { mode } = useThemeConfig();
  const colorSchemeMatchMedia = window.matchMedia('(prefers-color-scheme: dark)');
  const [theme, setTheme] = useState<ThemeMode>(() => {
    return mode === 'auto' ? (colorSchemeMatchMedia.matches ? 'dark' : 'light') : mode;
  });
  const previousMode = useRef(theme);

  useEffect(() => {
    function updateTheme() {
      const themeType = colorSchemeMatchMedia.matches ? 'dark' : 'light';

      if (themeType !== previousMode.current) {
        setTheme(themeType);
        previousMode.current = themeType;
      }
    }

    updateTheme();

    const mediaQuery = colorSchemeMatchMedia;
    mediaQuery.addEventListener('change', updateTheme);

    return () => {
      mediaQuery.removeEventListener('change', updateTheme);
    };
  }, [colorSchemeMatchMedia]);

  return theme;
}

export { useSystemTheme };