import 'elemental/less/elemental.less';
import 'babel-polyfill';

import React from 'react';
import { render } from 'react-dom';
import { Router, Route, useRouterHistory } from 'react-router';
import { createHashHistory } from 'history';
import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';
import { Provider } from 'react-redux';
import { syncHistoryWithStore } from 'react-router-redux';

import reducer from './reducers';
import App from './containers/App';
import { windowResize } from './actions/app';


const store = applyMiddleware(thunkMiddleware)(createStore)(reducer);

// global resize handler to update the window height in the state
window.onresize = () => {
    store.dispatch(windowResize(window.innerHeight));
};

const history = syncHistoryWithStore(useRouterHistory(createHashHistory)({ queryKey: false }), store);

render(
    <Provider store={store}>
        <Router history={history}>
            <Route path="/" component={App} />
        </Router>
    </Provider>,
    document.getElementById('mount')
);
