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

import Layout from '@/layouts/Main';
import DashboardLayout from '@/layouts/Dashboard';
import Home from '@/pages/Main/Home';
import useUser from '@/hooks/useUser';
import routes from './sideBar';

const SettingsPage = lazy(() => import('@/pages/Dashboard/Settings'));
const CourseDetails = lazy(() => import('@/pages/Main/CourseDetails'));
const Snai3iCourse = lazy(() => import('@/pages/Dashboard/EnrollCourse'));
const EditTeacher = lazy(() => import('@/pages/Dashboard/Teachers/EditTeacher'));
const Market = lazy(() => import('@/pages/Dashboard/Market'));
const Error404 = lazy(() => import('@/pages/Errors/Error404'));
const Login = lazy(() => import('@/pages/Login'));
const Accounts = lazy(() => import('@/pages/Dashboard/Accounts'));
const CreateAccount = lazy(
  () => import('@/pages/Dashboard/Accounts/CreateAccount')
);
const EditAccount = lazy(
  () => import('@/pages/Dashboard/Accounts/EditAccount')
);
const Meetings = lazy(() => import('@/pages/Dashboard/Meetings'));
const Teachers = lazy(() => import('@/pages/Dashboard/Teachers'));
const CreateTeacher = lazy(
  () => import('@/pages/Dashboard/Teachers/CreateTeacher')
);
const Orders = lazy(() => import('@/pages/Dashboard/Orders'));

const CreateSchoolOrder = lazy(
  () => import('@/pages/Dashboard/Orders/SchoolsOrders/CreateSchoolOrder')
);
const EditSchoolOrder = lazy(
  () => import('@/pages/Dashboard/Orders/SchoolsOrders/EditSchoolOrder')
);
const CreateTeacherOrder = lazy(
  () => import('@/pages/Dashboard/Orders/TeachersOrders/CreateTeacherOrder')
);
const EditTeacherOrder = lazy(
  () => import('@/pages/Dashboard/Orders/TeachersOrders/EditTeacherOrder')
);
const CreateSnai3iCourse = lazy(
  () => import('@/pages/Dashboard/Snai3iCourses/CreateSnai3iCourse')
);
const CreateMarketCourse = lazy(
  () => import('@/pages/Dashboard/MarketCourses/CreateMarketCourse.tsx')
);
const MarketCourses = lazy(() => import('@/pages/Dashboard/MarketCourses'));
const Snai3iCourses = lazy(() => import('@/pages/Dashboard/Snai3iCourses'));

const DashboardHome = lazy(() => import('@/pages/Dashboard/Home'));
const MyCoursesInstDesigner = lazy(
  () => import('@/pages/Dashboard/MyCoursesInstDesigner')
);
const CreateCourseByInst = lazy(
  () =>
    import(
      '@/pages/Dashboard/MyCoursesInstDesigner/components/CreateCourseByInst'
    )
);
const MyCoursesSchool = lazy(() => import('@/pages/Dashboard/MyCoursesSchool'));
const MyCoursesTeacher = lazy(
  () => import('@/pages/Dashboard/MyCoursesTeacher')
);
const Tutorials = lazy(() => import('@/pages/Dashboard/Tutorials'));
// const Courses = lazy(() => import('@/pages/Main/Home/components/Courses'));

const Router = () => {
  const { user } = useUser();
  const role = user?.role;
  // const role = 'school';
  const verifyRole = (component: React.ReactNode, path: string) => {
    if (
      routes.find((route) => route.path === path)?.roles.includes(role ?? '')
    ) {
      return component;
    } else {
      return <Navigate to="/dashboard" />;
    }
  };
  // const user = true;
  return useRoutes([
    {
      path: '/',
      element: <Layout />,
      children: [
        { path: '', element: <Home /> },
        { path: 'courses/:courseId', element: <CourseDetails /> },
      ],
    },
    {
      path: '/dashboard',
      element: user ? <DashboardLayout /> : <Navigate to="/login" />,
      children: [
        { path: 'home', element: <DashboardHome /> },
        {
          path: 'market',
          element: <Market />,
        },
        {
          path: 'courses',
          element: <Snai3iCourse />,
        },
        {
          path: 'courses/instructor',
          element: verifyRole(
            <MyCoursesInstDesigner />,
            '/dashboard/courses/instructor'
          ),
        },
        {
          path: 'courses/instructor/create',
          element: verifyRole(
            <CreateCourseByInst />,
            '/dashboard/courses/instructor'
          ),
        },
        {
          path: 'courses/instructor/edit/:courseId',
          element: verifyRole(
            <CreateCourseByInst isEdit />,
            '/dashboard/courses/instructor'
          ),
        },
        {
          path: 'courses/teacher',
          element: verifyRole(
            <MyCoursesTeacher />,
            '/dashboard/courses/teacher'
          ),
        },
        {
          path: 'courses/school',
          element: verifyRole(<MyCoursesSchool />, '/dashboard/courses/school'),
        },
        {
          path: 'snai3i-courses/list',
          element: verifyRole(
            <Snai3iCourses />,
            '/dashboard/snai3i-courses/list'
          ),
        },
        {
          path: 'tutorials',
          element: verifyRole(<Tutorials />, '/dashboard/tutorials'),
        },
        {
          path: 'market-courses/list',
          element: verifyRole(
            <MarketCourses />,
            '/dashboard/market-courses/list'
          ),
        },
        {
          path: 'market-courses/create',
          element: verifyRole(
            <CreateMarketCourse />,
            '/dashboard/market-courses/list'
          ),
        },
        {
          path: 'market-courses/edit/:courseId',
          element: verifyRole(
            <CreateMarketCourse isEdit />,
            '/dashboard/market-courses/list'
          ),
        },
        {
          path: 'snai3i-courses/create',
          element: verifyRole(
            <CreateSnai3iCourse />,
            '/dashboard/snai3i-courses/list'
          ),
        },
        {
          path: 'snai3i-courses/edit/:courseId',
          element: verifyRole(
            <CreateSnai3iCourse isEdit />,
            '/dashboard/snai3i-courses/list'
          ),
        },
        {
          path: 'orders',
          element: verifyRole(<Orders />, '/dashboard/orders'),
        },
        {
          path: 'orders/teachers/create',
          element: verifyRole(<CreateTeacherOrder />, '/dashboard/orders'),
        },
        {
          path: 'orders/teachers/edit/:orderId',
          element: verifyRole(<EditTeacherOrder />, '/dashboard/orders'),
        },
        {
          path: 'orders/schools/create',
          element: verifyRole(<CreateSchoolOrder />, '/dashboard/orders'),
        },
        {
          path: 'orders/schools/edit/:orderId',
          element: verifyRole(<EditSchoolOrder />, '/dashboard/orders'),
        },
        {
          path: 'meetings',
          element: verifyRole(<Meetings />, '/dashboard/meetings'),
        },
        {
          path: 'accounts',
          element: verifyRole(<Accounts />, '/dashboard/accounts'),
        },
        {
          path: 'accounts/create',
          element: verifyRole(<CreateAccount />, '/dashboard/accounts'),
        },
        {
          path: 'accounts/edit/:userId',
          element: verifyRole(<EditAccount />, '/dashboard/accounts'),
        },
        {
          path: 'teachers',
          element: verifyRole(<Teachers />, '/dashboard/teachers'),
        },
        {
          path: 'teachers/create',
          element: verifyRole(<CreateTeacher />, '/dashboard/teachers'),
        },
        {
          path: 'teachers/edit/:teacherId',
          element: verifyRole(<EditTeacher />, '/dashboard/teachers'),
        },
        {
          path: 'settings',
          element: <SettingsPage />,
        },
      ],
    },
    {
      path: '/dashboard/snai3i-courses/enroll',
      element: user ? (
        <DashboardLayout isCourseLayout />
      ) : (
        <Navigate to="/login" />
      ),
      children: [
        {
          path: ':courseId',
          element: <Snai3iCourse />,
        },
      ],
    },
    {
      path: '/login',
      element: user ? <Navigate to="/dashboard" /> : <Login />,
    },
    { path: '*', element: <Error404 /> },
  ]);
};
export default Router;