import { TooltipPositionContext } from "@root/src/contexts/TooltipPositionContext";
import {
	ButtonHTMLAttributes,
	ReactNode,
	useCallback,
	useContext,
	useMemo,
} from "react";

interface RoundButtonBaseProps {
	children: ReactNode;
	buttonProps?: ButtonHTMLAttributes<HTMLButtonElement>;
	tooltipText?: string;
}

const RoundButtonBase: React.FC<RoundButtonBaseProps> = ({
	children,
	buttonProps,
	tooltipText,
}) => {
	const tooltipPosition = useContext(TooltipPositionContext);
	const chooseTooltipPosition = useCallback(() => {
		if (tooltipPosition === "top") return "tooltip-top";
		if (tooltipPosition === "bottom") return "tooltip-bottom";
		if (tooltipPosition === "left") return "tooltip-left";
		if (tooltipPosition === "right") return "tooltip-right";
	}, [tooltipPosition]);

	const roundButtonBase = useMemo(() => {
		const tooltipDivProps = {
			className: "tooltip" + " " + chooseTooltipPosition(),
			"data-tip": tooltipText,
		};
		if (!tooltipText || !tooltipPosition)
			return (
				<button className={"btn btn-outline btn-circle"} {...buttonProps}>
					{children}
				</button>
			);
		else {
			return (
				<div {...tooltipDivProps}>
					<button className={"btn btn-outline btn-circle"} {...buttonProps}>
						{children}
					</button>
				</div>
			);
		}
	}, [
		buttonProps,
		children,
		chooseTooltipPosition,
		tooltipPosition,
		tooltipText,
	]);
	return roundButtonBase;
};

export default RoundButtonBase;