import {
	createBrowserRouter,
	IndexRouteObject,
	Link,
	Navigate,
	NonIndexRouteObject,
	useParams,
} from "react-router-dom";
import ErrorPage from "../app/error";
import LoginPage from "../app/login";
import WithAuth from "../components/utils/with-auth";
import { CodeManageProvider } from "../app/admin/code-manage/CodeManageContext";
import CodeManageLayout from "../app/admin/code-manage/CodeManageLayout";
import QuickUploadPage from "../app/admin/quick-file/page";
import { QuickFileProvider } from "../app/admin/quick-file/quickFileContext";
import QuickFileManage from "../app/admin/quick-file/manage";
import { DashboardProvider } from "../app/admin/dashboard/DashboardContext";
import DashboardLayout from "../app/admin/dashboard/DashboardLayout";
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: "/",
		element: <>
			<QuickFileProvider>
				<QuickUploadPage></QuickUploadPage>
			</QuickFileProvider>
		</>,
		errorElement: <ErrorPage />,
	},
	{
		path: "/login",
		breadcrumb: "登录",
		element: <LoginPage></LoginPage>,
	},
	{
		path: "/code-manage",
		element: <>
			<WithAuth>
				<CodeManageProvider>
					<CodeManageLayout></CodeManageLayout>
				</CodeManageProvider>
			</WithAuth>
		</>
	},
	{
		path: "/manage",
		element: <>
			<WithAuth>
				<QuickFileManage></QuickFileManage>
			</WithAuth>
		</>,
		children: [
			{
				index: true,
				element: <Navigate to="/manage/dashboard" replace />
			},
			{
				path: "/manage/share-code",
				element: <>
					<CodeManageProvider>
						<CodeManageLayout></CodeManageLayout>
					</CodeManageProvider>
				</>
			},
			{
				path: "/manage/dashboard",
				element: <>
					<DashboardProvider>
						<DashboardLayout></DashboardLayout>
					</DashboardProvider>
				</>
			}
		]
	}
];

export const router = createBrowserRouter(routes);