import React from 'react';
import { StaticRouter } from 'react-router';
import { Provider } from 'react-redux';
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';

// Static server app (to have prefilled html)
const ServerApp = props => {
  // context here is req from server
  const { store, location, context } = props;

  const renderApp = () => {
    return (
      <Provider store={store}>
        <DndProvider backend={HTML5Backend}>
          <StaticRouter context={context || {}} location={location}>
            <IconContext.Provider value={{ style: { verticalAlign: 'middle' } }}>
              <Main server />
            </IconContext.Provider>
          </StaticRouter>
        </DndProvider>
      </Provider>
    );
  };

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

export default ServerApp;
