import { Global, css } from "@emotion/react";
import React from "react";
import ReactDOM from "react-dom/client";
import { RouterProvider, createBrowserRouter } from "react-router-dom";
import { setupAxiosInterceptors } from "./api/AxiosService";
import { main, viteEnv } from "./configure";
import "./locales/localesConfig";
import routes from "./routes/routes";
import inDev from "./utils/inDev";
import "/style.css"; // Global tailwind styles

/**
 * Sets up Axios interceptors for HTTP requests.
 */
setupAxiosInterceptors();

/**
 * Logs environment variables if in development mode.
 */
inDev(() => console.log(viteEnv));
// Routing
const router = createBrowserRouter(routes, {
	basename: main.base_path,
	future: {
		// Normalize `useNavigation()`/`useFetcher()` `formMethod` to uppercase
		v7_normalizeFormMethod: true,
	},
});
// Mounting the application to the DOM
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
	<React.StrictMode>
		<Global
			styles={css`
				html,
				body,
				#root {
					width: 100%;
					height: 100%;
					position: relative;
					background-color: oklch(var(--b2));
				}
			`}
		/>
		<RouterProvider router={router} />
	</React.StrictMode>,
);
