import {
	createRouter,
	createHashHistory,
	createRootRoute,
	createRoute,
	redirect,
	Outlet,
} from "@tanstack/react-router";
import React from "react";
import ContentRules from "../pages/ContentRules";
import MainHeader from "../MainHeader";
import GlobalSettings from "../pages/GlobalSettings";

// 1. Create root route
const rootRoute = createRootRoute({
	component: () => (
		<div>
			<MainHeader />
			<Outlet />
		</div>
	),
	notFoundComponent: () => {
		return <p>Not found!</p>;
	},
});

// 2. Create restrictions route
const restrictionsRoute = createRoute({
	getParentRoute: () => rootRoute,
	path: "content-rules",
	component: ContentRules,
});

// 3. Create settings route
const settingsRoute = createRoute({
	getParentRoute: () => rootRoute,
	path: "settings/general",
	component: GlobalSettings,
});

// 4. Create index route that redirects to restrictions
const indexRoute = createRoute({
	getParentRoute: () => rootRoute,
	path: "/",
	beforeLoad: async () => {
		throw redirect({
			to: "/content-rules",
			replace: true,
		});
	},
});

// 5. Build route tree
const routeTree = rootRoute.addChildren([
	indexRoute,
	restrictionsRoute,
	settingsRoute,
]);

// 6. Create router instance
export const router = createRouter({
	routeTree,
	history: createHashHistory(),
	defaultPreload: "intent",
});

// 7. Type safety
declare module "@tanstack/react-router" {
	interface Register {
		router: typeof router;
	}
}