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

import ForgotPassword from "./Auth/ForgotPassword";
import Login from "./Auth/Login";
import Register from "./Auth/Register";
import ResetPassword from "./Auth/ResetPassword";
import Settings from "./Auth/Settings";
import VerifyEmail from "./Auth/VerifyEmail";
import CompleteRegistration from "./User/CompleteRegistration";
import Profile from "./User/Profile";
import PrivateRoute from "./Shared/PrivateRoute";
import About from "./Static/About";
import Footer from "./Static/Footer";
import Home from "./Static/Home";
import NoMatch from "./Static/NoMatch";
import Navbar from "./Navbar";

class App extends Component {
  render() {
    return (
      <div>
        <Navbar />
        <div
          style={{
            display: "flex",
            minHeight: "calc(100vh - 1px)",
            flexDirection: "column"
          }}
        >
          <div style={{ flex: "1" }}>
            <Switch>
              <Route exact path="/" component={Home} />
              <Route path="/about" component={About} />
              <Route path="/auth/login" component={Login} />
              <Route path="/auth/register" component={Register} />
              <Route
                path="/auth/verify-email/:emailKey"
                component={VerifyEmail}
              />
              <Route path="/auth/verify-email" component={VerifyEmail} />
              <PrivateRoute path="/auth/settings" component={Settings} />
              <Route path="/auth/forgot-password" component={ForgotPassword} />
              <Route
                path="/auth/reset-password/:uid/:token"
                component={ResetPassword}
              />
              <PrivateRoute path="/user/profile" component={Profile} />
              <Route path='/user/complete-registration' component={Profile} />
              <Route component={NoMatch} />
            </Switch>
            <Route path='/user/complete-registration' component={CompleteRegistration} />
          </div>
          <Footer />
        </div>
      </div>
    );
  }
}

export default App;