import {
	createBrowserRouter,
	IndexRouteObject,
	Link,
	NonIndexRouteObject,
	useParams,
} from "react-router-dom";
import ErrorPage from "../app/error";
import WithAuth from "../components/utils/with-auth";
import LoginPage from "../app/login";
import HomePage from "../app/main/home/page";
import { CourseDetailPage } from "../app/main/course/detail/page";
import { CourseBasicForm } from "../components/models/course/editor/form/CourseBasicForm";
import CourseContentForm from "../components/models/course/editor/form/CourseContentForm/CourseContentForm";
import CourseEditorLayout from "../components/models/course/editor/layout/CourseEditorLayout";
import { MainLayout } from "../app/main/layout/MainLayout";
import CoursesPage from "../app/main/courses/page";
import PathsPage from "../app/main/paths/page";
import { adminRoute } from "./admin-route";
import { CoursePreview } from "../app/main/course/preview/page";
interface CustomIndexRouteObject extends IndexRouteObject {
	name?: string;
	breadcrumb?: string;
}
interface CustomIndexRouteObject extends IndexRouteObject {
	name?: string;
	breadcrumb?: string;
}

export interface CustomNonIndexRouteObject extends NonIndexRouteObject {
	name?: string;
	children?: CustomRouteObject[];
	breadcrumb?: string;
	handle?: {
		crumb: (data?: any) => void;
	};
}
export type CustomRouteObject =
	| CustomIndexRouteObject
	| CustomNonIndexRouteObject;
export const routes: CustomRouteObject[] = [
	{
		path: "/",
		errorElement: <ErrorPage />,
		handle: {
			crumb() {
				return <Link to={"/"}>主页</Link>;
			},
		},
		children: [
			{
				element: <MainLayout></MainLayout>,
				children: [
					{
						index: true,
						element: <HomePage />,
					},
					{
						path: "paths",
						element: <PathsPage></PathsPage>,
					},
					{
						path: "courses",
						element: <CoursesPage></CoursesPage>,
					},

					{
						path: "profiles",
					},

					// // 课程预览页面
					// {
					// 	path: "coursePreview/:id?",
					// 	element: <CoursePreview></CoursePreview>,
					// },
				],
			},
			{
				path: "course",
				children: [
					{
						path: ":id?/editor",
						element: (
							<WithAuth>
								<CourseEditorLayout></CourseEditorLayout>
							</WithAuth>
						),
						children: [
							{
								index: true,
								element: (
									<WithAuth>
										<CourseBasicForm></CourseBasicForm>
									</WithAuth>
								),
							},

							{
								path: "content",
								element: (
									<WithAuth>
										<CourseContentForm></CourseContentForm>
									</WithAuth>
								),
							},
							// {
							// 	path: "setting",
							// 	element: (
							// 		<CourseSettingForm></CourseSettingForm>
							// 	),
							// },
						],
					},
					{
						path: ":id?/detail/:lectureId?", // 使用 ? 表示 id 参数是可选的
						element: <CourseDetailPage />,
					},
				],
			},
			adminRoute,
		],
	},
	{
		path: "/login",
		breadcrumb: "登录",
		element: <LoginPage></LoginPage>,
	},
];

export const router = createBrowserRouter(routes);