import {
	autoUpdate,
	flip,
	offset,
	shift,
	useDismiss,
	useFloating,
	useHover,
	useInteractions,
} from "@floating-ui/react";
import { type ReactElement, type ReactNode, useState } from "react";

export const Tooltip = (props: {
	content: ReactElement | string | number;
	children: ReactNode;
	placement?: "top";
}) => {
	const [isOpen, setIsOpen] = useState<boolean>(false);

	const { refs, floatingStyles, context } = useFloating({
		open: isOpen,
		onOpenChange: setIsOpen,
		middleware: [offset(3), shift(), flip()],
		whileElementsMounted: autoUpdate,
	});

	const hover = useHover(context, { move: false });
	const dismiss = useDismiss(context);

	const { getReferenceProps, getFloatingProps } = useInteractions([
		hover,
		dismiss,
	]);

	const handleMouseEnter = () => setIsOpen(true);
	const handleMouseLeave = () => setIsOpen(false);

	return (
		<>
			<span
				ref={refs.setReference}
				{...getReferenceProps()}
				onMouseEnter={handleMouseEnter}
				onMouseLeave={handleMouseLeave}
				className="bn-h-fit bn-inline-flex bn-items-center"
			>
				{props.children}
			</span>
			{isOpen && (
				<span
					ref={refs.setFloating}
					style={floatingStyles}
					{...getFloatingProps()}
					onMouseOver={handleMouseEnter}
					onFocus={handleMouseEnter}
					onMouseOut={handleMouseLeave}
					onBlur={handleMouseLeave}
					className="bn-bg-[#1a1b1e] bn-border bn-border-solid bn-border-[#242629] bn-text-white bn-text-sm bn-font-medium bn-rounded-md bn-px-1.5 bn-py-1 bn-relative bn-z-10"
				>
					{props.content}
				</span>
			)}
		</>
	);
};
