import './App.css';
import { RouterProvider, createBrowserRouter, Navigate } from 'react-router-dom';
import Login from './pages/Login';
import Surveys from './pages/Surveys';
import NewSurvey from './pages/NewSurvey';
import SurveyResults from './pages/SurveyResults';
import SurveyAssignees from './pages/SurveyAssignees';
import Users from './pages/Users';
import NavBar from './components/NavBar';
import useLoginState from './hooks/useLoginState';
import CssBaseline from '@mui/material/CssBaseline';
import CustomThemeProvider from './CustomThemeProvider';

function routes({ login, logout, isLoggedIn }) {
  
  function withNavBar(component) {
    const navbarLinks = [
      { label: 'Surveys', link: '/surveys' },
      { label: 'New Survey', link: '/surveys/new' },
      { label: 'Users', link: '/users' },
    ];
    return (<>
      <NavBar isLoggedIn={isLoggedIn} pages={navbarLinks} logout={logout} />
      {component}
    </>);
  }

  if (!isLoggedIn) {
    return ([
      {
        path: '*',
        element: <Login login={login}/>,
      },
    ]);
  } else {
    return ([
      {
        path: '/',
        element: <Navigate to={{ pathname: '/surveys' }} />,
      },
      {
        path: '/surveys',
        element: withNavBar(<Surveys />),
      },
      {
        path: '/surveys/new',
        element: withNavBar(<NewSurvey />),
      },
      {
        path: '/surveys/:surveyId/results',
        element: withNavBar(<SurveyResults />),
      },
      {
        path: '/surveys/:surveyId/assignees',
        element: withNavBar(<SurveyAssignees />),
      },
      {
        path: '/users',
        element: withNavBar(<Users />),
      },
    ]);
  }

}

export default function App() {
  const { login, logout, isLoggedIn } = useLoginState();
  const currentRoutes = routes({isLoggedIn, logout, login});
  return (
    <>
      <CssBaseline />
      <CustomThemeProvider>
        <RouterProvider router={
          createBrowserRouter(currentRoutes)
        }/>
      </CustomThemeProvider>
    </>
  );
}