import { HamburgerMenuIcon } from "@radix-ui/react-icons";
import { useEffect, useState } from "react";
import { Outlet } from "react-router-dom";
import { main, navigation } from "../../configure.tsx";
import NavigationTree from "../../components/NavigationTree.tsx";
import Breadcrumbs from "../../components/Breadcrumbs.tsx";
import ConfirmationDialog from "../../components/ConfirmationDialog/ConfirmationDialog.tsx";

/** Here is located global wrapper for entire application, here you canfind:
 * - Drawer - contains navigation buttons
 * - Navbar - contains hamburger menu and theme selector
 * - Outlet - contains active page content
 * - App theme controll
 */
function App() {
	const [openDrawer, setOpenDrawer] = useState<boolean>(false);

	useEffect(() => {
		document.querySelector("html")?.setAttribute("data-theme", "acid");
		// To resolve this issue, you can use the import.meta.env object instead of process.env. The import.meta.env object is provided by Vite.js and allows you to access environment variables in your code.
		document.title = import.meta.env.VITE_APP_NAME;
	}, [openDrawer]);

	// Function on click drawer hamburger button
	const handleDrawerStatus = () => {
		setOpenDrawer(!openDrawer);
	};

	return (
		<div>
			<ConfirmationDialog />
			{/* Root drawer container */}
			{/* Drawer opening is controlled directly via css prop and next via local useState variable */}
			<div className={"drawer " + (openDrawer ? "lg:drawer-open" : "")}>
				{/* A hidden checkbox to toggle the visibility of the drawer */}
				<input
					id="my-drawer"
					type="checkbox"
					placeholder="drawer-checkbox"
					className="drawer-toggle"
					checked={openDrawer}
					onChange={handleDrawerStatus}
				/>
				{/* The actual drawer content */}
				<div className="drawer-content">
					{/* Navbar */}
					<div className="navbar bg-neutral text-neutral-content w-auto">
						{/* Left side navbar */}
						<div className="flex-1">
							<label
								htmlFor="my-drawer"
								className="btn btn-circle btn-neutral drawer-button"
							>
								<HamburgerMenuIcon className="w-6 h-6" />
							</label>
							<p className="text-lg font-bold ml-8">{main.program_name}</p>
						</div>
						{/* Right side navbar */}
						<div className="flex-none gap-2">{main.program_version}</div>
					</div>
					{/* App/active_drawer content */}
					<div className="drawer-content">
						{/*Automatically generated breadcrumbs based on routing table from configuration file and active path*/}
						{/*Get active route and find it in routing file*/}
						<Breadcrumbs />
						<Outlet />
					</div>
				</div>
				{/* Drawer sidebar wrapper */}
				<div className="drawer-side z-20">
					{/* Dark overlay on mobile devices, clickable to close drawer */}
					<label htmlFor="my-drawer" className="drawer-overlay"></label>
					<ul className="menu bg-base-200 w-56 h-full overflow-auto">
						<NavigationTree routes={navigation} />
					</ul>
				</div>
			</div>
		</div>
	);
}

export default App;