import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { RouterProvider, createBrowserRouter } from 'react-router-dom';
import { DoorPage, loader as doorpageloader } from './pages/DoorPage';
import { ErrorPage } from './pages/ErrorPage';
import { QueryRouter } from './routers/QueryRouter';
import { EditPage } from './pages/EditPage';
import { RedirectPage } from './pages/RedirectPage';
import { OnboardingPage } from './pages/OnboardingPage';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    errorElement: <ErrorPage />,
    children: [
      {
        path: "",
        loader: doorpageloader,
        element: 
          <QueryRouter
            mapping={{
                edit: <EditPage />,
                door: <DoorPage />,
                onboard: <OnboardingPage />,
                onboardForm: <EditPage isOnboarding={true} />,
                state: <RedirectPage />
            }}
          />
      }
    ]
  }
])

root.render(
  <RouterProvider router={router} />
);