import { Path, useLocation } from "wouter";
import { navigate } from "wouter/use-browser-location";
import { FloatingMenuProps } from "../types/floatingMenuTypes";
import { capitalizeFirstLetter } from "../utils/StringTransformationUtils";

// -----VARIABLES-----
// Exported variables for shared location state management
export let location: Path;
export let setLocation: typeof navigate;

// -----COMPONENT-----
/**
 * FloatingMenu Component
 *
 * This component renders a customizable floating menu with interactive elements.
 * It uses the 'wouter' library for location management and provides a dynamic way
 * to render menu items based on the 'menuStructure' prop passed to it.
 *
 * @param {FloatingMenuProps} props - The properties passed to the FloatingMenu component.
 * @returns {JSX.Element} A React component that renders a floating menu.
 */
const FloatingMenu = (props: FloatingMenuProps) => {
	// Setting up location hooks for navigation
	[location, setLocation] = useLocation();

	// Function to generate interactive buttons based on provided menu structure
	const generateButtons = () => {
		return props.menuStructure.map((item, index) => {
			// Checking if the menu item includes label, icon, and action for button generation
			if ("label" in item && "icon" in item && "action" in item) {
				return (
					<div
						key={`floating_menu_element_container_${index}`}
						className={props.tooltipClassName || `tooltip tooltip-left`}
						data-tip={capitalizeFirstLetter(item.label)}
					>
						<li
							key={`floating_menu_element_${index}`}
							className="btn btn-circle btn-outline"
							onClick={item.action}
						>
							{item.icon}
						</li>
					</div>
				);
			} else {
				// Rendering custom JSX elements when provided
				return (
					<div
						key={`floating_menu_element_container_${index}`}
						className={props.tooltipClassName || `tooltip tooltip-left`}
						data-tip={capitalizeFirstLetter(item.label)}
					>
						{item.element}
					</div>
				);
			}
		});
	};

	// Render the floating menu with dynamically generated buttons
	return (
		<ul
			className={
				props.className || `flex gap-2 absolute right-4 top-4 flex-col` + " z-[999]"
			}
		>
			{generateButtons()}
		</ul>
	);
};

export default FloatingMenu;
