import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, compose } from 'redux';
import { Router, Switch, Route } from 'react-router-dom';
import Shipping from './components/information/shipping';
import Payment from './components/information/payment';

import './style/main.scss';

import reducers from './reducers';

// composing two functions together in order to get devToolsExtension working
const createStoreWithMiddleware = applyMiddleware()(compose((window.devToolsExtension ? window.devToolsExtension() : f => f)(createStore)));

import history from './history'; // does this need to be after the createStoreWithMiddleware instantiation? it was in max's code

import Layout from './components/layout';
import Signin from './components/auth/signin';
import Signup from './components/auth/signup';
import Account from './components/account/account';
import Shop from './components/shop/shop';
import Review from './components/order/review';

function main() {
    ReactDOM.render(
	    <Provider store={createStoreWithMiddleware(reducers)}>
	    <Router history={history}>
            <Layout>
	    <Switch>
	    <Route path='/' exact component={Signin} />
	    <Route path='/signin' exact component={Signin} />
	    <Route path='/signup' exact component={Signup} />
	    <Route path='/account' exact component={Account} />
	    <Route path='/shop' exact component={Shop} />
	    <Route path='/order/review' exact component={Review} />
	    <Route path='/information/shipping' exact component={Shipping} />
	    <Route path='/information/payment' exact component={Payment} />
	</Switch>
	    </Layout>
	    </Router>
	    </Provider>,
	document.querySelector('.app-wrapper')
    );
}

document.addEventListener('DOMContentLoaded', main);
