import './App.css';

// Pages
import LoginPage from './pages/LoginPage';
import ModelsPage from './pages/ModelsPage';
import ModelChartPage from './pages/ModelChartPage';
import AttacksPage from './pages/AttacksPage';

// Components
import HeaderComponent from './components/HeaderComponent';
import LoadingSpinnerComponent from './components/LoadingSpinnerComponent';

// Configs
import client from "./client";

// React
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import { useEffect, useState } from 'react';

function App() {
  // 0: Checking login status
  // 1: Not logged in
  // 2: Logged in
  const [loggedIn,setLoggedIn] = useState(0); 
  useEffect(() => {
    client.get("/private")
    .then(response => (response.status === 200 ? setLoggedIn(2) : setLoggedIn(1)))
    .catch(error => {setLoggedIn(1)})
  }, []);
  
  return (
    loggedIn === 2 ? 
    <div>
      <Router>
        <HeaderComponent />
        <Routes>
          <Route path='/' element={<ModelsPage />} />
          <Route path='/models' element={<ModelsPage />} />
          <Route path='/model/:id' element={<ModelChartPage/>}></Route>
          <Route path='/attacks' element={<AttacksPage />} />
        </Routes>
      </Router>
    </div>
  : loggedIn === 1 ? <LoginPage /> : <LoadingSpinnerComponent size={500}/>
  ) 
}

export default App;