import React, { FC, useEffect } from 'react';
import { useColors } from '../../hooks/useColors';
import { ThemeProvider } from '@emotion/react';
import { IColors, IColorsSettings } from '../../types/theme';
import { RecoilRoot } from 'recoil';

export const BnThemeProvider: FC<IColorsSettings> = ({ children, colors }) => {
  const { colors: ThemeColors, setColors } = useColors();
  useEffect(() => {
    if (colors) {
      if (JSON.stringify(colors) !== JSON.stringify(ThemeColors)) {
        setColors({ ...ThemeColors, ...colors });
      }
    }
  }, [colors]);
  return (
    <ThemeProvider theme={ThemeColors as IColors}>{children}</ThemeProvider>
  );
};

export const BnProvider: FC<IColorsSettings> = ({ children, colors }) => {
  return (
    <RecoilRoot>
      <BnThemeProvider colors={colors}>{children}</BnThemeProvider>
    </RecoilRoot>
  );
};