import { useReducer } from 'react';

import domReady from '@wordpress/dom-ready';
import { createRoot } from '@wordpress/element';

import { premiumSettingsReducer, settingsReducer } from './context/reducer';
import {
  PremiumSettingsContext,
  PremiumSettingsDispatchContext,
  SettingsContext,
  SettingsDispatchContext,
} from './context/contexts';
import { premiumSettings, visitorsSettings } from './context/initialState';
import ChatBot from './components/ChatBot';
import InitVisitors from './InitVisitors';

import './styles/global.styles.scss';

const Providers = () => {
  const [data, dispatch] = useReducer(settingsReducer, visitorsSettings);
  const [premiumData, premiumDispatch] = useReducer(
    premiumSettingsReducer,
    premiumSettings
  );

  return (
    <PremiumSettingsContext.Provider value={premiumData}>
      <PremiumSettingsDispatchContext.Provider value={premiumDispatch}>
        <SettingsContext.Provider value={data}>
          <SettingsDispatchContext.Provider value={dispatch}>
            <InitVisitors>
              <ChatBot />
            </InitVisitors>
          </SettingsDispatchContext.Provider>
        </SettingsContext.Provider>
      </PremiumSettingsDispatchContext.Provider>
    </PremiumSettingsContext.Provider>
  );
};

domReady(() => {
  const root = createRoot(document.getElementById('botfoundry-visitors'));

  root.render(<Providers />);
});