import { Global, css } from "@emotion/react";
import React, { useEffect } from "react";
import ReactDOM from "react-dom/client";
import { useTranslation } from "react-i18next";
import { Router } from "wouter";
import App from "./App";
import { setupAxiosInterceptors } from "./api/AxiosService";
import { main, viteEnv } from "./configure";
import useLocalStorage from "./hooks/useLocalStorage";
import "./locales/localesConfig";
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));

/**
 * Global variables to manage the application's language state.
 */
export let language: string, setLanguage: (value: string) => void;

/**
 * _App component which is the main entry point of the application.
 * Manages routing and global state like language.
 *
 * @returns The Router component wrapping the main App component.
 */
const _App = () => {
	// Hook to manage language state in local storage
	[language, setLanguage] = useLocalStorage("language", "eng");
	const { i18n } = useTranslation();

	// Effect to change language based on state
	useEffect(() => {
		i18n.changeLanguage(language);
	}, [language]);

	// Conditional rendering based on base path
	if (main.base_path !== "/") {
		return (
			<Router base={main.base_path}>
				<App />
			</Router>
		);
	} else {
		return (
			<Router>
				<App />
			</Router>
		);
	}
};

// 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;
				}
			`}
		/>
		<_App />
	</React.StrictMode>,
);
