import { lazy } from "react";
import { Navigate, useRoutes } from "react-router-dom";
import useUser from "@/hooks/useUser";

import Layout from "@/layouts/Main";
import Home from "@/pages/Home";
import FormPage from "@/pages/FormPage";
import StormCourse from "@/pages/StormCourse";

const FormLayout = lazy(() => import("@/layouts/Register"));
const RegisterYourChild = lazy(() => import("@/pages/RegisterYourChild"));
const RegisterStorm = lazy(() => import("@/pages/RegisterStorm"));
const RegisterFormsIds = lazy(
  () => import("@/pages/Dashboard/RegisterFormsIds")
);
const Settings = lazy(() => import("@/pages/Dashboard/Settings"));
const CreateForm = lazy(() => import("@/pages/Dashboard/Forms/CreateForm"));
const Forms = lazy(() => import("@/pages/Dashboard/Forms"));
const UpdateForm = lazy(() => import("@/pages/Dashboard/Forms/UpdateForm"));
const GeneratedForm = lazy(() => import("@/pages/GeneratedForm"));
const Spark = lazy(() => import("@/pages/Spark"));
const Storm = lazy(() => import("@/pages/Storm"));
const Error404 = lazy(() => import("@/pages/Errors/Error404"));
const DashboardLayout = lazy(() => import("@/layouts/Dashboard"));
const LoginAdmin = lazy(() => import("@/pages/LoginAdmin"));
const UsersList = lazy(() => import("@/pages/Dashboard/UsersList"));

const Router = () => {
  const { user } = useUser();
  return useRoutes([
    {
      path: "/",
      element: <Layout />,
      children: [
        { path: "", element: <Home /> },
        { path: "/spark", element: <Spark /> },
        { path: "/storm", element: <Storm /> },
      ],
    },
    { path: "/storm/course", element: <StormCourse /> },
    {
      path: "/register",
      element: <FormLayout />,
      children: [
        {
          path: "spark",
          element: <RegisterYourChild />,
        },
        {
          path: "storm",
          element: <RegisterStorm />,
        },
      ],
    },
    {
      path: "/forms",
      element: <FormLayout />,
      children: [
        {
          path: ":id",
          element: <FormPage />,
        },
      ],
    },
    {
      path: "/admin",
      element: user ? <DashboardLayout /> : <Navigate to="/admin/login" />,
      children: [
        {
          path: "users",
          element:
            user?.role === "superAdmin" ? (
              <UsersList />
            ) : (
              <Navigate to="/admin" />
            ),
        },
        {
          path: "forms/create",
          element: <CreateForm />,
        },
        {
          path: "forms",
          element: <Forms />,
        },
        {
          path: "forms/:id/edit",
          element: <UpdateForm />,
        },
        {
          path: "forms/:id",
          element: <GeneratedForm />,
        },
        {
          path: "register-forms-ids",
          element: <RegisterFormsIds />,
        },
        { path: "settings", element: <Settings /> },
      ],
    },

    {
      path: "/admin/login",
      element: user ? <Navigate to="/admin" /> : <LoginAdmin />,
    },
    { path: "*", element: <Error404 /> },
  ]);
};
export default Router;