/* eslint-disable react-refresh/only-export-components */
import { Suspense, lazy } from "react";
import { RouteObject } from "react-router-dom";
import Loader from "./components/Loader";
import AboutPage from "./features/About/AboutPage";
import App from "./features/App";
import LoginPage from "./features/Login/LoginPage";
import { flatternRoutingTable } from "./utils/RoutingTableUtils";
import Debugger from "./features/Debugger";
//----
const HomePageLazy = lazy(() => import("./features/Home/HomePage"));

export const viteEnv = import.meta.env;

// Based on https://reactrouter.com/en/main/start/overview#nested-routes with additional props
export const navigation: CustomRouteObject[] = [
	// root page, mainframe for all pages, skipped in navigation tree generation (inly childs are used)
	{
		path: "/",
		element: <App />,
		additionalProps: {
			name: "Root", // used for breadcrumbs and navigation tree
			disableRedirect: false, //entry will not be included in the react-router redirect list, will cut out childs
			disableInNavbar: true, //entry will not be rendered in the navbar
			disableBreadcrumbBar: false, //entry will be directly under root in routing table
		},
		children: [
			// home page
			{
				path: "/",
				index: true, //if true will be used as a default route for parent, dont declare path if use this
				element: (
					<Suspense fallback={<Loader />}>
						<HomePageLazy />
					</Suspense>
				),
				additionalProps: {
					name: "Home",
					disableRedirect: false,
					disableInNavbar: false,
					disableBreadcrumbBar: false,
				},
			},
			// about page
			{
				path: "about",
				element: <AboutPage />,
				additionalProps: {
					name: "About",
					disableRedirect: false,
					disableInNavbar: false,
					disableBreadcrumbBar: false,
				},
				children: [
					{
						path: "child",
						element: <div>DUPA CHILD</div>,
						additionalProps: {
							name: "About Child",
							disableRedirect: false,
							disableInNavbar: false,
							disableBreadcrumbBar: false,
						},
					},
				],
			},
			// login page
			{
				path: "login",
				element: <LoginPage />,
				additionalProps: {
					name: "Login",
					disableRedirect: false,
					disableInNavbar: false,
					disableBreadcrumbBar: false,
				},
			},
		],
	},
];
// ---

if (viteEnv.DEV) {
	// Add Test page
	// Test page is outside of mainframe, will be rendered in root (withius App where is entire navigation frame)
	navigation.push({
		path: "/Test",
		element: <div>Test</div>,
		additionalProps: {
			name: "Test",
			disableRedirect: false,
			disableInNavbar: false,
			disableBreadcrumbBar: false,
		},
	});
	// Add debugger page
	navigation[0].children?.push({
		path: "debug_variables",
		element: <Debugger />,
		additionalProps: {
			name: "Debug Variables",
			disableRedirect: false,
			disableInNavbar: false,
			disableBreadcrumbBar: false,
		},
	});
}

// ---
//Custom Route Object for handling custom behaviours on app navigation
export interface RouteObjectAdditionalProps {
	name: string;
	disableRedirect: boolean;
	disableInNavbar: boolean;
	disableBreadcrumbBar: boolean;
}
export interface CustomRouteObject extends Omit<RouteObject, "children"> {
	additionalProps: RouteObjectAdditionalProps;
	children?: CustomRouteObject[];
}
//----
//Main configuration, static data, mostly used here
export const main = {
	program_name: viteEnv.VITE_APP_NAME,
	program_version: "1.0.0",
};
//About page configuration
export const about = {
	program_description: `This is a ${main.program_name} for <purpose>.`,
	program_authors: [{ name: "Author Name", email: "email@example.com" }],
};
//----
export const flatRoutes = flatternRoutingTable(navigation);