import { Global, css } from "@emotion/react";
import React, { useEffect } from "react";
import ReactDOM from "react-dom/client";
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
import { useTranslation } from "react-i18next";

setupAxiosInterceptors();
inDev(() => console.log(viteEnv));
export let language: string, setLanguage: (value: string) => void;

const _App = () => {
	[language, setLanguage] = useLocalStorage("language", "eng");
	const { i18n } = useTranslation();
	useEffect(() => {
		i18n.changeLanguage(language);
	}, [language]);
	if (main.base_path !== "/") {
		return (
			<Router base={main.base_path}>
				<App />
			</Router>
		);
	} else {
		return (
			<Router>
				<App />
			</Router>
		);
	}
};

// Hook react to the HTML element with id="root"
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>,
);
