import * as React from 'react';
import * as ReactDOM from 'react-dom';
import createSagaMiddleware, { SagaMiddleware } from 'redux-saga';
import { fork } from 'redux-saga/effects';
import { createHashHistory } from 'history';


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

import * as system from 'commons/util/system';

import configureStore from 'config/configureStore';
import { sagas } from 'config/configureRedux';
import muiTheme from 'config/configureMuiTheme';


import App from 'app/views/container/component/App';

injectTapEventPlugin();

const sagaMiddleware: SagaMiddleware<any> = createSagaMiddleware();

const history = createHashHistory();
const store = configureStore(history, sagaMiddleware);

function* app(): any {
  const appContainer = yield system.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}>
          <App/>
        </MuiThemeProvider>
      </ConnectedRouter>
    </Provider>,
    appContainer,
  );
}

sagaMiddleware.run(app);