import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { fork } from 'redux-saga/effects';

import { Provider } from 'react-redux';
import { Switch } from 'react-router';
import { ConnectedRouter } from 'react-router-redux';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import * as injectTapEventPlugin from 'react-tap-event-plugin';


import Platform from '@overflow/commons/platform';
import { store, sagaMiddleware, history } from './redux/store';

import sagas from './redux/saga';
import muiTheme from './theme/mui';

injectTapEventPlugin();

function* app(): any {
  const appContainer: HTMLElement = yield Platform.getAppContainer('react-placeholder');



  ReactDOM.render(
      <div style={{
        width: '100vw',
        height: '100vh',
        backgroundColor: 'white',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        }}>
          <h1>Loading...</h1>
      </div>,
      appContainer,
  );

  sagaMiddleware.run(sagas);

  ReactDOM.render(
    <Provider store={store}>
      <ConnectedRouter history={history}>
        <MuiThemeProvider muiTheme={muiTheme}>
          <Switch>

          </Switch>
        </MuiThemeProvider>
      </ConnectedRouter>
    </Provider>,
    appContainer,
  );
}

sagaMiddleware.run(app);