// React
import React from 'react';

// Redux
import { Provider } from 'react-redux';

// Router
import { Router, Route, IndexRedirect, IndexRoute, useRouterHistory } from 'react-router';
import { createHistory } from 'history';

// Componenten
import CampaignList from './components/campaignList.jsx';
import ChangePassword from './components/changePassword.jsx';
import Contract from './components/contract.jsx';
import ContractList from './components/contractList.jsx';
import Dashboard from './components/dashboard.jsx';
import InvoiceList from './components/invoiceList.jsx';
import Login from './components/login.jsx';
import LoginSter from './components/loginSter.jsx';
import Logout from './components/logout.jsx';
import OrderPartList from './components/orderPartList.jsx';
import Portal from './components/portal.jsx';
import SpotTable from './components/spotTable.jsx';
import Summary from './components/summary.jsx';
import UserDetails from './components/userDetails.jsx';
import UserList from './components/userList.jsx';

// Contants
import { PORTAL_PREFIX } from './constants/appConstants';

const browserHistory = useRouterHistory(createHistory)({
  basename: PORTAL_PREFIX
});

/**
 * Scroll to top when switching to another route.
 */
browserHistory.listen(location => {
  setTimeout(() => {
    if (location.action === 'POP') {
      return;
    }

    window.scrollTo(0, 0);
  });
});

// Routes
export const routes = (store, requireAuth) => (<Provider store={store}>
    <Router history={browserHistory}>
      <Route path="/" component={Portal}>
        <Route onEnter={requireAuth}>
          <IndexRedirect to="dashboard" />
          <Route path="dashboard">
            <IndexRoute component={Dashboard} />
            <Route path="password" component={ChangePassword} />
            <Route path="users" component={UserList} />
            <Route path="users/create" component={UserDetails} />
            <Route path="users/:userId" component={UserDetails} />
          </Route>
          <Route path="campaigns">
            <Route path=":medium">
              <IndexRoute component={CampaignList} />
              <Route path=":orderId" component={OrderPartList} />
              <Route path="spots/:orderId" component={SpotTable} />
              <Route path="spots/:orderId/:orderPartId" component={SpotTable} />
              <Route path="summary/:orderId" component={Summary} />
            </Route>
          </Route>
          <Route path="contracts">
            <Route path=":medium">
              <IndexRoute component={ContractList} />
              <Route path=":contractId" component={Contract} />
            </Route>
          </Route>
          <Route path="invoices">
            <Route path=":medium">
              <IndexRoute component={InvoiceList} />
            </Route>
          </Route>
        </Route>
        <Route path="login">
          <IndexRoute component={Login} />
          <Route path="ster" component={LoginSter} />
        </Route>
        <Route path="logout" component={Logout} />
      </Route>
    </Router>
  </Provider>);