import {
	TooltipPositionContext,
	TooltipPositionContextType,
} from "@root/src/contexts/TooltipPositionContext";
import React, { useCallback } from "react";
// Local Interfaces
interface OverlayButtonContainerProps {
	children: React.ReactNode;
	position?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
	horizontal?: boolean;
	tooltipPosition?: TooltipPositionContextType;
}

const MenuContainer: React.FC<OverlayButtonContainerProps> = ({
	children,
	position = "top-right",
	horizontal,
	tooltipPosition = undefined,
}) => {
	const chooseContainerPosition = useCallback(() => {
		const commonClasses = `z-50 menu bg-base-300 rounded-box gap-4 absolute ${horizontal ? "menu-horizontal" : ""} `;
		if (position === "top-left") return commonClasses + "top-2 left-2";
		if (position === "top-right") return commonClasses + "top-2 right-2";
		if (position === "bottom-left") return commonClasses + "bottom-2 left-2";
		if (position === "bottom-right") return commonClasses + "bottom-2 right-2";
	}, [horizontal, position]);

	const overlayButtonContainer = () => {
		const divProps = {
			className: chooseContainerPosition(),
		};
		return (
			<TooltipPositionContext.Provider value={tooltipPosition}>
				<div {...divProps}>{children}</div>
			</TooltipPositionContext.Provider>
		);
	};

	return overlayButtonContainer();
};

export default MenuContainer;