import React from 'react';
import ReactDOM from 'react-dom/client';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import App from './App.tsx';
import Login from './components/Login/Login.tsx';
import Register from './components/Register/Register.tsx';
import Logout from './components/Logout/Logout.tsx';
import ProtectedRoute from './components/ProtectedRoute/ProtectedRoute.tsx';
import InverseProtectedRoute from './components/ProtectedRoute/InverseProtectedRoute.tsx';
import Dashboard from './components/Dashboard/Dashboard.tsx';
import BookingQuery from './components/BookingQuery/BookingQuery.tsx';
import BookingList from './components/BookingList/BookingList.tsx';
import { AuthoriseUser } from './services/Authorise/Authorise.ts';
import { LogoutUser } from './services/Logout/Logout.ts';
import { GetCustomerDashboardData } from './services/Dashboard/CustomerDashboard.ts';
import { GetAirlineDashboardData } from './services/Dashboard/AirlineDashboard.ts';
import { GetBookingList } from './services/BookingList/BookingList.ts';
import './index.scss';

const router = createBrowserRouter([
  {
    path: '/',
    loader: AuthoriseUser,
    element: <App></App>,
    children: [
      {
        element: <InverseProtectedRoute></InverseProtectedRoute>,
        children: [
          {
            path: 'login',
            element: <Login></Login>
          },
          {
            path: 'register',
            element: <Register></Register>
          }
        ]
      },
      {
        element: <ProtectedRoute></ProtectedRoute>,
        children: [
          {
            path: 'logout',
            loader: LogoutUser,
            element: <Logout></Logout>
          },
          {
            path: 'customer-dashboard',
            loader: GetCustomerDashboardData,
            element: <Dashboard></Dashboard>
          },
          {
            path: 'airline-dashboard',
            loader: GetAirlineDashboardData,
            element: <Dashboard></Dashboard>
          },
          {
            path: 'booking/query',
            element: <BookingQuery></BookingQuery>
          },
          {
            path: 'booking/list',
            loader: GetBookingList,
            element: <BookingList></BookingList>
          }
        ]
      }
    ]
  }
]);

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <RouterProvider router={router}></RouterProvider>
  </React.StrictMode>,
)