import { useEffect } from 'react';
import { ThemeContextValue } from '../../context';

export function useSetThemeBody(
  theme: ThemeContextValue['theme'],
  colors: ThemeContextValue['colors']
) {
  useEffect(() => {
    // @ts-ignore
    if (typeof window !== 'undefined') {
      // @ts-ignore
      const html = window.document.querySelector('html');
      // @ts-ignore
      const body = window.document.querySelector('body');

      if (html && body) {
        html.classList.remove('dark', 'light');
        body.classList.remove('dark', 'light');
        html.classList.add(theme);
        body.classList.add(theme);
        html.style.backgroundColor = colors.get('background');
      }
    }
  }, [theme, colors]);
}