import { ReactNode, Suspense, lazy, useContext } from 'react';
import { Navigate, Outlet, RouteObject, RouterProvider, createBrowserRouter } from 'react-router-dom';

import paths, { rootPaths } from './paths';

import PageLoader from '../components/loading/PageLoader';
import Splash from 'components/loading/Splash';
import Education from 'pages/Education/Education';
import Property from 'pages/Property/Property';
import Vendors from 'pages/Vendors/Vendors';
import EducationDetail from 'components/sections/dashboard/Home/Education/EducationDetail';
import TermsOfService from 'pages/home/TermsOfService';
import { AuthContext, AuthProvider } from 'contexts/AuthContext';

const App = lazy(() => import('App'));
const MainLayout = lazy(async () => {
  return Promise.all([
    import('layouts/main-layout'),
    new Promise((resolve) => setTimeout(resolve, 1000)),
  ]).then(([moduleExports]) => moduleExports);
});
const AuthLayout = lazy(async () => {
  return Promise.all([
    import('layouts/auth-layout'),
    new Promise((resolve) => setTimeout(resolve, 1000)),
  ]).then(([moduleExports]) => moduleExports);
});

const Error404 = lazy(async () => {
  await new Promise((resolve) => setTimeout(resolve, 500));
  return import('pages/errors/Error404');
});

const Sales = lazy(async () => {
  return Promise.all([
    import('pages/home/Sales'),
    new Promise((resolve) => setTimeout(resolve, 500)),
  ]).then(([moduleExports]) => moduleExports);
});

const Login = lazy(async () => import('pages/authentication/Login'));
const SignUp = lazy(async () => import('pages/authentication/SignUp'));

const ResetPassword = lazy(async () => import('pages/authentication/ResetPassword'));
const ForgotPassword = lazy(async () => import('pages/authentication/ForgotPassword'));

type ProtectedRouteProps = {
  children?: ReactNode;
}

const ProtectedRoute = ({ children }: ProtectedRouteProps) => {
    const { authenticated, loading } = useContext(AuthContext);

    if (!authenticated && !loading) {
        return <Navigate to="/authentication/login" replace />;
    }

    return children;
};

const routes: RouteObject[] = [
  {
    element: (
      <Suspense fallback={<Splash />}>
        <App />
      </Suspense>
    ),
    children: [
      {
        path: rootPaths.homeRoot,
        element: (
          <ProtectedRoute>
            <MainLayout>
              <Suspense fallback={<PageLoader />}>
                <Outlet />
              </Suspense>
            </MainLayout>
          </ProtectedRoute>
        ),
        children: [
          {
            path: paths.home,
            element: <Sales />,
          },
        ],
      },
      {
        path: rootPaths.authRoot,
        element: (
          <AuthLayout>
            <Suspense fallback={<PageLoader />}>
              <Outlet />
            </Suspense>
          </AuthLayout>
        ),
        children: [
          {
            path: paths.login,
            element: <Login />,
          },
          {
            path: paths.signup,
            element: <SignUp />,
          },
          {
            path: paths.resetPassword,
            element: <ResetPassword />,
          },
          {
            path: paths.forgotPassword,
            element: <ForgotPassword />,
          },
        ],
      },
      // {
      //     path: rootPaths.termsOfServiceRoot,
      //     element: (
      //       <AuthLayout>
      //       <Suspense fallback={<PageLoader />}>
      //         <Outlet />
      //       </Suspense>
      //     </AuthLayout>
      //     ),
      //   children: [
      //     {
      //       path: paths.login,
      //       element: <TermsOfService />,
      //     },
      //   ]
      // },
      {
          path: rootPaths.propertyRoot,
          
          element: (
            <ProtectedRoute>
              <MainLayout>
                <Suspense fallback={<PageLoader />}>
                  <Outlet />
                </Suspense>
              </MainLayout>
            </ProtectedRoute>
          ),
          children: [
            {
              path: paths.property,
              element: <Property />,
            },
          ],
      },
      {
          path: rootPaths.educationRoot,
          
          element: (
            <ProtectedRoute>
              <MainLayout>
                <Suspense fallback={<PageLoader />}>
                  <Outlet />
                </Suspense>
              </MainLayout>
            </ProtectedRoute>
          ),
          children: [
            {
              path: paths.education,
              element: <Education />,
            },
            {
              path: paths.educationLesson,
              element: <EducationDetail />,
            },
          ],
      },
      {
          path: rootPaths.vendorsRoot,
          
          element: (
            <ProtectedRoute>
              <MainLayout>
                <Suspense fallback={<PageLoader />}>
                  <Outlet />
                </Suspense>
              </MainLayout>
            </ProtectedRoute>
          ),
          children: [
            {
              path: paths.vendors,
              element: <Vendors />,
            },
          ],
      },
      {
        path: '*',
        element: <Error404 />,
      },
    ],
  },
];

const router = createBrowserRouter(routes, { basename: '/elegent' });


export default router;
