import React, { Component } from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

// Store
import { Provider } from "react-redux";
import store from "../redux/store";

// Routes
import Migrations from "./root/Pages/Migrations";
import GenericList from "./root/Pages/GenericList";
import Reports from "./root/Pages/Reports";
import Book from "./root/Pages/Book";
import IDSingle from "./root/Pages/IDSingle";
// Components
import Home from "./root/Home";
import Navigation from "./root/Navigation";

// Main app component, react-router comes from here,
// and links to all of the sub pages

class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <Router>
          <Navigation />
          <div className="row">
            <div className="col s12 m4 13">
              <div className="container-fluid">
                <Switch>
                  <Route exact path="/" component={Home} />
                  <Route exact path="/book" component={Book} />
                  <Route exact path="/migrations" component={Migrations} />
                  <Route exact path="/reports" component={Reports} />
                  <Route path="/migrations/:migrationId" component={IDSingle} />
                  <Route
                    exact
                    path="/upcoming-migrations"
                    render={(props) => (
                      <GenericList {...props} APILINK="/pending/" />
                    )}
                  />
                  <Route
                    exact
                    path="/missed"
                    render={(props) => (
                      <GenericList {...props} APILINK="/missed/" />
                    )}
                  />
                  <Route
                    exact
                    path="/completed"
                    render={(props) => (
                      <GenericList {...props} APILINK="/completed/" />
                    )}
                  />
                  <Route
                    exact
                    path="/pending-terminations"
                    render={(props) => (
                      <GenericList {...props} APILINK="/waitingterm/" />
                    )}
                  />
                  <Route
                    exact
                    path="/all-terminations"
                    render={(props) => (
                      <GenericList {...props} APILINK="/pendingterm/" />
                    )}
                  />
                  <Route
                    exact
                    path="/historical-migrations"
                    render={(props) => (
                      <GenericList {...props} APILINK="/all/" />
                    )}
                  />
                  <Route
                    exact
                    path="/booked"
                    render={(props) => (
                      <GenericList {...props} APILINK="/booked/" />
                    )}
                  />
                </Switch>
              </div>
            </div>
          </div>
        </Router>
      </Provider>
    );
  }
}

export default App;