import { Global, css } from "@emotion/react";
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { setupAxiosInterceptors } from "./api/AxiosService";
import { main, viteEnv } from "./configure";
import inDebug from "./utils/inDebug";
import "/style.css"; // Global tailwind styles
import { Router } from "wouter";

setupAxiosInterceptors();
inDebug(() => console.log(viteEnv));
//! Important, defining base as '/' isn't equal to not defining it at all. That way is easier 😁
const _App = () => {
	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>,
);