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

import React from 'react';
import ReactDOM from 'react-dom';
import ReactGA from 'react-ga';
import ReactGA4 from 'react-ga4';
import { Provider } from 'react-redux';
import { Route } from 'react-router-dom';
import { ConnectedRouter } from 'connected-react-router';
import { PersistGate } from 'redux-persist/integration/react';
import Toaster from 'app/shared/components/toaster/toaster';
import { hotjar } from 'react-hotjar';
import { history, persistor, store } from './common/store';
import config from 'app/common/services/config/config.service';
import { AppContainer } from 'app/common/containers/app';

const googleAnalytics4Id = config.getGoogleAnalyticsV4Id();
const googleAnalyticsId = config.getGoogleAnalyticsId();
if (googleAnalytics4Id) {
  ReactGA4.initialize(googleAnalytics4Id);
  ReactGA4.send('pageview');
}
if (googleAnalyticsId) {
  ReactGA.initialize(googleAnalyticsId);
  ReactGA.pageview(location.pathname);
}

declare global {
  interface Window {
    root: any
  }
}

if (config.isProduction()) {
  hotjar.initialize(Number(config.getHotjarSiteId()!), Number(config.getHotjarSnippetVersion()!));
}

ReactDOM.render(
  <Provider store={ store }>
    <PersistGate loading={null} persistor={persistor}>
      <Toaster />
      <ConnectedRouter history={ history }>
        <Route path="/" component={ AppContainer } />
      </ConnectedRouter>
    </PersistGate>
  </Provider>,
  window.root
);