import React from 'react';
import { Provider } from 'react-redux';
import { ConnectedRouter } from 'connected-react-router';
import Main from 'components/layouts/Main';
import { ApolloProvider } from '@apollo/client';
import { IconContext } from 'react-icons';
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';

import config from 'config/general';
import client from 'store/rootApollo';

// Default app used without SSR
const ClientApp = props => {
  const { store, history } = props;

  const renderApp = () => {
    return (
      <Provider store={store}>
        <DndProvider backend={HTML5Backend}>
          <ConnectedRouter history={history}>
            <IconContext.Provider value={{ style: { verticalAlign: 'middle' } }}>
              <Main />
            </IconContext.Provider>
          </ConnectedRouter>
        </DndProvider>
      </Provider>
    );
  };

  if (!config.apollo) return renderApp();
  return <ApolloProvider client={client.getInstance()}>{renderApp()}</ApolloProvider>;
};

export default ClientApp;
