import React, { Suspense, lazy } from 'react'
import { Switch, Route, BrowserRouter as Router , useLocation} from 'react-router-dom';

import PrivateRoute from './components/private-route/private.route'
import './components/font-awesome'
import './App.css';
import FooterComponent from './components/app-footer/footer.component'
import Spinner from "./components/utility/hoc/spinner/spinner.component"
import AppHeader from './components/app-header/header.component'


const  Dashboard = lazy( () => import("./pages/dashboard/dashboard.component"))
const  SignIn = lazy( () => import( './components/sign-in/sign-in.component'))
const  SignUp = lazy( () => import( './components/sign-up/sign-up.component'))
const  ForgotPassword = lazy( () => import( './components/forgot-password/forgot-password.component'))
const  CaseHistoryWrapperComponent = lazy( () => import( './components/case-history/case-history.wrapper.component'))
function App() {
  return (
    <div className="page-container">

      <div className="content-wrap">
        <Suspense fallback={<Spinner defaultHeight={false} />}>
          <Router>
            <Switch>
                <Route exact path="/">
                  <SignIn />
                </Route>          
                {/* protectd route */}          
                <PrivateRoute path="/dashboard">
                  {/* TODO: need to memoize app header */}
                  <AppHeader />       
                  <Dashboard />
                </PrivateRoute> 
                  
                <Route path="/register">
                    <SignUp />
                  </Route>
                <PrivateRoute path="/case-history">
                    <CaseHistoryWrapperComponent />
                  </PrivateRoute>
                <Route path="/forgot-password">
                    <ForgotPassword />
                  </Route>
                <Route path="*">
                  <NoMatch />
                </Route>
              </Switch>
          </Router>
        </Suspense>
      </div>
      <FooterComponent />
    </div>
  )
}

const NoMatch = () => {
  let location = useLocation()

  return (
    <div>
      <h3>
        No match for <code>{location.pathname}</code>
      </h3>
    </div>
  );
}

export default App;
