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

import { Provider } from 'react-redux';
import { ConnectedRouter } from 'react-router-redux';
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 routes from './router';

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}>
  //       {routes}
  //     </ConnectedRouter>
  //   </Provider>,
  //   appContainer,
  // );
}

sagaMiddleware.run(app);