import { Home } from "@/routes/Home";
import { Piece } from "@/routes/Piece";
import { Pieces } from "@/routes/Pieces";
import { Repertoire } from "@/routes/Repertoire";
import { Repertoires } from "@/routes/Repertoires";
import { Root } from "@/routes/Root";
import { Settings } from "@/routes/Settings";
import { lazy, StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import "./style.css";

const Attachment = lazy(() => import("@/routes/Attachment"));

const router = createBrowserRouter([
	{
		path: "/",
		Component: Root,
		children: [
			{
				index: true,
				Component: Home,
			},
			{
				path: "piece",
				children: [
					{
						index: true,
						Component: Pieces,
					},
					{
						path: ":pieceId",
						children: [
							{
								index: true,
								Component: Piece,
							},
							{
								path: "attachment/:attachmentId",
								Component: Attachment,
							},
						],
					},
				],
			},
			{
				path: "repertoire",
				children: [
					{
						index: true,
						Component: Repertoires,
					},
					{
						path: ":repertoireId",
						Component: Repertoire,
					},
				],
			},
			{
				path: "settings",
				Component: Settings,
			},
		],
	},
], {
	future: {
		v7_fetcherPersist: true,
		v7_normalizeFormMethod: true,
		v7_partialHydration: true,
		v7_relativeSplatPath: true,
		v7_skipActionErrorRevalidation: true,
	},
});

const rootElement = document.getElementById("root") as HTMLDivElement;
const root = createRoot(rootElement);

root.render(
	<StrictMode>
		<RouterProvider router={router} future={{ v7_startTransition: true }} />
	</StrictMode>,
);