import React, { useEffect, useState } from 'react';
import { BrowserRouter, Navigate, Route, Routes} from 'react-router-dom';

import './css/App.css';
import Home from './pages/Home';
import ErrorBoundary from './util/ErrorBoundary';
import Sidebar, { SidebarMenu } from './components/Sidebar';
import UserControls from './components/UserControls';
import { useLoginContext } from './structures/UserContext';
import Login from './pages/Login';
import { fetchUser } from './util/Util';
import PrivateRoute from './structures/PrivateRoute';
import { UnauthedRoute } from './structures/UnauthedRoute';
import Users from './pages/Users';
import Admin from './pages/Admin';
import TitledPage from './components/TitledPage';

function App() {

  const [user, updateUser] = useLoginContext();
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    (async () => {
      await fetchUser();
      updateUser();
      setLoading(false);
    })();
  }, []);

  const menuItems = [
    { to: '/home', label: 'Home' },
    { to: '/users', label: 'Users' },
    { to: '/admin', label: 'Admin' }
  ];

  if (loading) return null;

  return (
    <div className='app is-full-screen'>
      
      <div className='background'>

          <BrowserRouter>

          {user ? 
            <div>
              <header className="card">
                <UserControls />
              </header>
              <Sidebar>
                <SidebarMenu menuItems={menuItems} />
              </Sidebar>
            </div>
            : null}

            <div className='main-content'>
              <ErrorBoundary>
                <Routes>
                  <Route path='/home/*' element={<PrivateRoute>
                    <TitledPage title='Home'>
                      <Home />
                    </TitledPage>
                  </PrivateRoute >} />
                  <Route path='/users/*' element={<PrivateRoute>
                    <TitledPage title='Users' >
                      <Users />
                    </TitledPage>
                  </PrivateRoute >} />
                  <Route path='/admin/*' element={<PrivateRoute>
                    <Admin />
                  </PrivateRoute >} />
                  <Route path='/login/*' element={<UnauthedRoute>
                    <Login />
                  </UnauthedRoute>} />
                  <Route path='*' element={<Navigate to='/home' />} />
                </Routes>
              </ErrorBoundary>
            </div>


          </BrowserRouter>

        </div>
    
    </div>
  );
}

export default App;