import { createBrowserRouter, Outlet, RouterProvider } from 'react-router-dom';

import ConceptToaster from './components/ConceptToaster';
import Footer from './components/Footer';
import Navigation from './components/Navigation/Navigation';
import { useConceptTheme } from './context/ThemeContext';
import CreateRSFormPage from './pages/CreateRSFormPage';
import HomePage from './pages/HomePage';
import LibraryPage from './pages/LibraryPage';
import LoginPage from './pages/LoginPage';
import ManualsPage from './pages/ManualsPage';
import NotFoundPage from './pages/NotFoundPage';
import RegisterPage from './pages/RegisterPage';
import RestorePasswordPage from './pages/RestorePasswordPage';
import RSFormPage from './pages/RSFormPage';
import UserProfilePage from './pages/UserProfilePage';

function Root() {
  const { noNavigation, noFooter, viewportHeight, mainHeight } = useConceptTheme();
  return (
    <div className='w-screen antialiased clr-app'>
      <Navigation />
      <ConceptToaster
        className='mt-[4rem] text-sm'
        autoClose={3000}
        draggable={false}
        pauseOnFocusLoss={false}
      />
      <div className='w-full overflow-auto' style={{maxHeight: viewportHeight}}>
      <main className='w-full h-full' style={{minHeight: mainHeight}}>
        <Outlet />
      </main>
        {!noNavigation && !noFooter && <Footer />}
      </div>
    </div>
  );
}

const router = createBrowserRouter([
  {
    path: '/',
    element: <Root />,
    errorElement: <NotFoundPage />,
    children: [
      {
        path: '',
        element: <HomePage />,
      },
      {
        path: 'login',
        element: <LoginPage />,
      },
      {
        path: 'signup',
        element: <RegisterPage />,
      },
      {
        path: 'restore-password',
        element: <RestorePasswordPage />,
      },
      {
        path: 'profile',
        element: <UserProfilePage />,
      },
      {
        path: 'manuals',
        element: <ManualsPage />,
      },

      {
        path: 'library',
        element: <LibraryPage />,
      },
      {
        path: 'rsforms/:id',
        element: <RSFormPage />,
      },
      {
        path: 'rsform-create',
        element: <CreateRSFormPage />,
      },
    ]
  },
]);

function App () {
  return (
    <RouterProvider router={router} />
  );
}

export default App;