import React, {useEffect, useState} from 'react';
import './App.css';
import Header from "./Components/Structure/Header";
import LoginForm from "./Components/Forms/LoginForm";
import {Container} from "reactstrap";
import {BrowserRouter} from "react-router-dom";
import {Route} from "react-router";
import useAuth from "./Hooks/auth";
import IndexPage from "./Components/Pages/IndexPage";
import GroupPage from "./Components/Pages/GroupPage";
import Loading from "./Components/Loading";
import LightPage from "./Components/Pages/LightPage";
import AdminPage from "./Components/Pages/AdminPage";

export default function App() {

  const [hasStarted, setHasStarted] = useState(false);
  const {isLoggedIn, isChecked, verify} = useAuth();

  useEffect(() => {
    if (!hasStarted) {
      verify();
      setHasStarted(true);
    }
  });

  return (
    <BrowserRouter>
      <>
        <Header/>
        <Container>
          {!isChecked && <Loading/>}
          {isChecked && !isLoggedIn && <LoginForm/>}
          {isChecked && isLoggedIn && (
            <>
              <Route exact path="/" component={IndexPage}/>
              <Route exact path="/lights" component={LightPage}/>
              <Route exact path="/groups" component={GroupPage}/>
              <Route exact path="/admin" component={AdminPage}/>
            </>
          )}
        </Container>
      </>
    </BrowserRouter>
  );
}