import './App.css'

import {Route, Switch, Redirect} from 'react-router-dom'
import LoginForm from './components/LoginForm/LoginForm'
import MainLayout from './Layout/MainLayout';
import Home from './pages/Home';
import Jobs from './pages/Jobs';
import Customers from './pages/Customers';
import Employees from './pages/Employees';
import NewJob from './pages/NewJob';
import { useContext } from 'react';
import AuthContext from './contexts/AuthContext';
import NewCustomer from './pages/NewCustomer';
import EditCustomer from './pages/EditCustomer';
import EditEmployee from './pages/EditEmployee';
import NewEmployee from './pages/NewEmployee';
import EditJob from './pages/EditJob';

function App() {

const authCtx = useContext(AuthContext)

  return (
    <div>
      
      <Switch>
        {/* Login Routes */}
        <Route path="/" exact>
          <Redirect to="/login" />
        </Route>

        {!authCtx.isLoggedIn &&  <LoginForm /> }

        <Route path="/login" exact>
          {!authCtx.isLoggedIn &&  <LoginForm /> }
          {authCtx.isLoggedIn &&  <Redirect to="/home" /> }
        </Route>

        <MainLayout>
          {/* Private Routes (employee and customer) */}
          {authCtx.isLoggedIn && <>
            <Route path="/home" exact>
              <Home />
            </Route>

            <Route path="/jobs" exact>
              <Jobs />
            </Route>

            {/* <Route path="/profile" exact>
              <Profile />
            </Route> */}
          </>}

          {/* Private Routes (employee) */}
          {authCtx.role === "employee" && <>
            {/* <Route path="/jobs" exact>
              <Jobs />
            </Route> */}

            <Route path="/jobs/new" exact>
              <NewJob />
            </Route>

            <Route path="/jobs/detail/:id" exact>
              <EditJob />
            </Route>

            <Route path="/customers" exact>
              <Customers />
            </Route>

            <Route path="/customers/new" exact>
              <NewCustomer />
            </Route>


            <Route path="/customers/detail/:id" exact>
              <EditCustomer />
            </Route>

            <Route path="/employees" exact>
              <Employees />
            </Route>

            <Route path="/employees/new" exact>
              <NewEmployee />
            </Route>

            <Route path="/employees/detail/:id" exact>
              <EditEmployee />
            </Route>
          </>}

        </MainLayout>

        {!authCtx.isLoggedIn && 
        <Route path="*">
          {/* <NotFound /> */}
          <Redirect to="/login" />
        </Route>
        }
        </Switch>
    </div>
  );
}

export default App;
