import { useRef } from "react";

import { ThemeProvider } from "styled-components";
import { render, cleanup, screen, fireEvent } from "@testing-library/react";
import { parseTheme } from "@ax/helpers";
import "@testing-library/jest-dom";

import FloatingMenu, { type IFloatingProps } from "@ax/components/FloatingMenu";
import globalTheme from "@ax/themes/theme.json";

jest.mock("react", () => {
	const originReact = jest.requireActual("react");
	const mUseRef = jest.fn();
	return {
		...originReact,
		useRef: mUseRef,
	};
});

const useMockRef = useRef as jest.MockedFunction<typeof useRef>;

afterEach(cleanup);
beforeEach(() => {
	useMockRef.mockReset();
	// Safe fallback for extra renders (useLayoutEffect, etc.)
	useMockRef.mockImplementation(() => ({ current: null }));
});

describe("FloatingMenu component rendering", () => {
	it("should render the component", () => {
		const buttonContent = () => (
			<div>
				<span>texto</span>
			</div>
		);

		const defaultProps: IFloatingProps = {
			children: <div>hola</div>,
			Button: buttonContent,
			isInAppBar: true,
			position: "left",
			closeOnSelect: false,
			reactiveToHover: true,
			offset: 10,
		};

		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<FloatingMenu {...defaultProps} />
			</ThemeProvider>,
		);

		const floatingMenu = screen.getByTestId("floating-menu");
		expect(floatingMenu).toBeInTheDocument();
	});

	it("should show the floating div when click", () => {
		const buttonContent = () => (
			<div>
				<span>texto</span>
			</div>
		);

		const defaultProps: IFloatingProps = {
			children: <div>hola</div>,
			Button: buttonContent,
			isInAppBar: true,
			reactiveToHover: true,
			offset: 10,
		};

		const wrapperRef = { current: {} };
		const buttonRef = { current: {} };
		const menuOptionsRef = { current: {} };
		Object.defineProperty(wrapperRef, "current", {
			set(_current) {
				if (_current) {
					jest.spyOn(_current, "contains").mockReturnValueOnce(true);
				}
				this._current = _current;
			},
			get() {
				return this._current;
			},
		});
		Object.defineProperty(buttonRef, "current", {
			set(_current) {
				if (_current) {
					jest.spyOn(_current, "contains").mockReturnValueOnce(true);
				}
				this._current = _current;
			},
			get() {
				return this._current;
			},
		});
		Object.defineProperty(menuOptionsRef, "current", {
			set(_current) {
				if (_current) {
					jest.spyOn(_current, "contains").mockReturnValueOnce(false);
				}
				this._current = _current;
			},
			get() {
				return this._current;
			},
		});
		useMockRef.mockReturnValueOnce(wrapperRef);
		useMockRef.mockReturnValueOnce(buttonRef);
		useMockRef.mockReturnValueOnce(menuOptionsRef);

		const { rerender } = render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<FloatingMenu {...defaultProps} />
			</ThemeProvider>,
		);

		const floatingMenu = screen.getByTestId("floating-menu");
		expect(floatingMenu).toBeInTheDocument();

		fireEvent.click(floatingMenu);

		expect(screen.getByTestId("floating-menu-wrapper")).toBeInTheDocument();

		useMockRef.mockReturnValueOnce(wrapperRef);

		rerender(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<FloatingMenu {...defaultProps} />
			</ThemeProvider>,
		);
		fireEvent.mouseDown(document);
		expect(screen.getByTestId("floating-menu-wrapper")).toBeInTheDocument();
	});

	it("should close the floating div when click", () => {
		const buttonContent = () => (
			<div>
				<span>texto</span>
			</div>
		);

		const defaultProps: IFloatingProps = {
			children: <div>hola</div>,
			Button: buttonContent,
			isInAppBar: true,
			reactiveToHover: true,
			offset: 10,
		};

		const wrapperRef = { current: {} };
		const buttonRef = { current: {} };
		const menuOptionsRef = { current: {} };

		Object.defineProperty(wrapperRef, "current", {
			set(_current) {
				if (_current) {
					jest.spyOn(_current, "contains").mockReturnValue(true);
				}
				this._current = _current;
			},
			get() {
				return this._current;
			},
		});
		Object.defineProperty(buttonRef, "current", {
			set(_current) {
				if (_current) {
					jest.spyOn(_current, "contains").mockReturnValueOnce(true);
				}
				this._current = _current;
			},
			get() {
				return this._current;
			},
		});
		Object.defineProperty(menuOptionsRef, "current", {
			set(_current) {
				if (_current) {
					jest.spyOn(_current, "contains").mockReturnValueOnce(false);
				}
				this._current = _current;
			},
			get() {
				return this._current;
			},
		});

		useMockRef.mockReturnValueOnce(wrapperRef);
		useMockRef.mockReturnValueOnce(buttonRef);
		useMockRef.mockReturnValueOnce(menuOptionsRef);

		const { rerender } = render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<FloatingMenu {...defaultProps} />
			</ThemeProvider>,
		);
		const floatingMenu = screen.getByTestId("floating-menu");
		expect(floatingMenu).toBeInTheDocument();

		fireEvent.click(floatingMenu);

		expect(screen.getByTestId("floating-menu-wrapper")).toBeInTheDocument();

		Object.defineProperty(wrapperRef, "current", {
			set(_current) {
				if (_current) {
					jest.spyOn(_current, "contains").mockReturnValue(false);
				}
				this._current = _current;
			},
			get() {
				return this._current;
			},
		});
		useMockRef.mockReturnValueOnce(wrapperRef);

		rerender(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<FloatingMenu {...defaultProps} />
			</ThemeProvider>,
		);

		fireEvent.mouseDown(document);

		expect(screen.queryByTestId("floating-menu-wrapper")).not.toBeInTheDocument();
	});

	it("should close the floating div when checking a checkbox (isCheckGroup)", () => {
		const buttonContent = () => <button type="button">menu</button>;

		const defaultProps: IFloatingProps = {
			children: <input type="checkbox" data-testid="menu-children" />,
			Button: buttonContent,
			isInAppBar: true,
			isCheckGroup: true,
			reactiveToHover: true,
			offset: 10,
		};

		const wrapperRef = { current: {} };
		const buttonRef = { current: {} };
		const menuOptionsRef = { current: {} };

		Object.defineProperty(wrapperRef, "current", {
			set(_current) {
				if (_current) {
					jest.spyOn(_current, "contains").mockReturnValue(true);
				}
				this._current = _current;
			},
			get() {
				return this._current;
			},
		});
		Object.defineProperty(buttonRef, "current", {
			set(_current) {
				if (_current) {
					jest.spyOn(_current, "contains").mockReturnValueOnce(true);
				}
				this._current = _current;
			},
			get() {
				return this._current;
			},
		});
		Object.defineProperty(menuOptionsRef, "current", {
			set(_current) {
				if (_current) {
					jest.spyOn(_current, "contains").mockReturnValueOnce(false);
				}
				this._current = _current;
			},
			get() {
				return this._current;
			},
		});

		useMockRef.mockReturnValueOnce(wrapperRef);
		useMockRef.mockReturnValueOnce(buttonRef);
		useMockRef.mockReturnValueOnce(menuOptionsRef);

		const { rerender } = render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<FloatingMenu {...defaultProps} />
			</ThemeProvider>,
		);
		const floatingMenu = screen.getByTestId("floating-menu");
		expect(floatingMenu).toBeInTheDocument();

		fireEvent.click(floatingMenu);

		expect(screen.getByTestId("floating-menu-wrapper")).toBeInTheDocument();

		Object.defineProperty(wrapperRef, "current", {
			set(_current) {
				if (_current) {
					jest.spyOn(_current, "contains").mockReturnValue(true);
				}
				this._current = _current;
			},
			get() {
				return this._current;
			},
		});
		Object.defineProperty(buttonRef, "current", {
			set(_current) {
				if (_current) {
					jest.spyOn(_current, "contains").mockReturnValueOnce(false);
				}
				this._current = _current;
			},
			get() {
				return this._current;
			},
		});
		Object.defineProperty(menuOptionsRef, "current", {
			set(_current) {
				if (_current) {
					jest.spyOn(_current, "contains").mockReturnValueOnce(true);
				}
				this._current = _current;
			},
			get() {
				return this._current;
			},
		});

		useMockRef.mockReturnValueOnce(wrapperRef);
		useMockRef.mockReturnValueOnce(buttonRef);
		useMockRef.mockReturnValueOnce(menuOptionsRef);
		rerender(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<FloatingMenu {...defaultProps} />
			</ThemeProvider>,
		);

		const menuChildren = screen.getByTestId("menu-children");
		fireEvent.click(menuChildren);

		expect(screen.queryByTestId("floating-menu-wrapper")).not.toBeInTheDocument();
	});

	it("should stay open when isCheckGroup and checkbox is unchecked", () => {
		const buttonContent = () => <span>trigger</span>;

		const defaultProps: IFloatingProps = {
			children: <input type="checkbox" defaultChecked data-testid="menu-checkbox" />,
			Button: buttonContent,
			isCheckGroup: true,
		};

		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<FloatingMenu {...defaultProps} />
			</ThemeProvider>,
		);

		const buttonWrapper = screen.getByTestId("floating-menu-button");
		fireEvent.click(buttonWrapper);
		expect(screen.getByTestId("floating-menu-wrapper")).toBeInTheDocument();

		// Click an already-checked checkbox → becomes unchecked → menu must stay open
		const checkbox = screen.getByTestId("menu-checkbox");
		fireEvent.click(checkbox);

		expect(screen.queryByTestId("floating-menu-wrapper")).toBeInTheDocument();
	});

	it("should close the floating div when select option (closeOnSelect=true)", () => {
		const buttonContent = () => <span data-testid="menu-children">texto</span>;

		const defaultProps: IFloatingProps = {
			children: <div>hola</div>,
			Button: buttonContent,
			isInAppBar: true,
			reactiveToHover: true,
			offset: 10,
		};

		const wrapperRef = { current: {} };
		const buttonRef = { current: {} };
		const menuOptionsRef = { current: {} };

		Object.defineProperty(wrapperRef, "current", {
			set(_current) {
				if (_current) {
					jest.spyOn(_current, "contains").mockReturnValue(true);
				}
				this._current = _current;
			},
			get() {
				return this._current;
			},
		});
		Object.defineProperty(buttonRef, "current", {
			set(_current) {
				if (_current) {
					jest.spyOn(_current, "contains").mockReturnValueOnce(true);
				}
				this._current = _current;
			},
			get() {
				return this._current;
			},
		});
		Object.defineProperty(menuOptionsRef, "current", {
			set(_current) {
				if (_current) {
					jest.spyOn(_current, "contains").mockReturnValueOnce(false);
				}
				this._current = _current;
			},
			get() {
				return this._current;
			},
		});

		useMockRef.mockReturnValueOnce(wrapperRef);
		useMockRef.mockReturnValueOnce(buttonRef);
		useMockRef.mockReturnValueOnce(menuOptionsRef);

		const { rerender } = render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<FloatingMenu {...defaultProps} />
			</ThemeProvider>,
		);
		const floatingMenu = screen.getByTestId("floating-menu");
		expect(floatingMenu).toBeInTheDocument();

		fireEvent.click(floatingMenu);

		expect(screen.getByTestId("floating-menu-wrapper")).toBeInTheDocument();

		Object.defineProperty(wrapperRef, "current", {
			set(_current) {
				if (_current) {
					jest.spyOn(_current, "contains").mockReturnValue(true);
				}
				this._current = _current;
			},
			get() {
				return this._current;
			},
		});
		Object.defineProperty(buttonRef, "current", {
			set(_current) {
				if (_current) {
					jest.spyOn(_current, "contains").mockReturnValueOnce(false);
				}
				this._current = _current;
			},
			get() {
				return this._current;
			},
		});
		Object.defineProperty(menuOptionsRef, "current", {
			set(_current) {
				if (_current) {
					jest.spyOn(_current, "contains").mockReturnValueOnce(true);
				}
				this._current = _current;
			},
			get() {
				return this._current;
			},
		});

		useMockRef.mockReturnValueOnce(wrapperRef);
		useMockRef.mockReturnValueOnce(buttonRef);
		useMockRef.mockReturnValueOnce(menuOptionsRef);
		rerender(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<FloatingMenu {...defaultProps} />
			</ThemeProvider>,
		);

		const menuChildren = screen.getByTestId("menu-children");
		fireEvent.click(menuChildren);

		expect(screen.queryByTestId("floating-menu-wrapper")).not.toBeInTheDocument();
	});

	it("shouldn't close the floating div when select option", () => {
		// menu-children lives inside children (the options area), not inside Button,
		// so clicking it is treated as an option selection, not a button click.
		const buttonContent = () => <span>trigger</span>;

		const defaultProps: IFloatingProps = {
			children: <span data-testid="menu-children">option text</span>,
			Button: buttonContent,
			isInAppBar: true,
			reactiveToHover: true,
			offset: 10,
			closeOnSelect: false,
		};

		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<FloatingMenu {...defaultProps} />
			</ThemeProvider>,
		);

		// Open the menu by clicking the button wrapper
		const buttonWrapper = screen.getByTestId("floating-menu-button");
		fireEvent.click(buttonWrapper);
		expect(screen.getByTestId("floating-menu-wrapper")).toBeInTheDocument();

		// Click on a menu option — with closeOnSelect=false the menu must stay open
		const menuChildren = screen.getByTestId("menu-children");
		fireEvent.click(menuChildren);

		expect(screen.queryByTestId("floating-menu-wrapper")).toBeInTheDocument();
	});

	it("should open the floating menu when handle over", () => {
		const buttonContent = () => <span data-testid="menu-children">texto</span>;

		const defaultProps: IFloatingProps = {
			children: <div>hola</div>,
			Button: buttonContent,
			isInAppBar: true,
			reactiveToHover: true,
			offset: 10,
			closeOnSelect: false,
		};

		const wrapperRef = { current: {} };
		const buttonRef = { current: {} };
		const menuOptionsRef = { current: {} };

		Object.defineProperty(wrapperRef, "current", {
			set(_current) {
				if (_current) {
					jest.spyOn(_current, "contains").mockReturnValue(true);
				}
				this._current = _current;
			},
			get() {
				return this._current;
			},
		});
		Object.defineProperty(buttonRef, "current", {
			set(_current) {
				if (_current) {
					jest.spyOn(_current, "contains").mockReturnValueOnce(true);
				}
				this._current = _current;
			},
			get() {
				return this._current;
			},
		});
		Object.defineProperty(menuOptionsRef, "current", {
			set(_current) {
				if (_current) {
					jest.spyOn(_current, "contains").mockReturnValueOnce(false);
				}
				this._current = _current;
			},
			get() {
				return this._current;
			},
		});

		useMockRef.mockReturnValueOnce(wrapperRef);
		useMockRef.mockReturnValueOnce(buttonRef);
		useMockRef.mockReturnValueOnce(menuOptionsRef);

		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<FloatingMenu {...defaultProps} />
			</ThemeProvider>,
		);
		const floatingMenu = screen.getByTestId("floating-menu");
		expect(floatingMenu).toBeInTheDocument();

		fireEvent.mouseEnter(floatingMenu);
		expect(screen.getByTestId("floating-menu-wrapper")).toBeInTheDocument();
		// If already open, a second mouseEnter must not close it
		fireEvent.mouseEnter(floatingMenu);
		expect(screen.getByTestId("floating-menu-wrapper")).toBeInTheDocument();
	});

	it("should close the floating menu when handle leave", () => {
		const buttonContent = () => <span data-testid="menu-children">texto</span>;

		const defaultProps: IFloatingProps = {
			children: <div>hola</div>,
			Button: buttonContent,
			isInAppBar: true,
			reactiveToHover: true,
			offset: 10,
			closeOnSelect: false,
		};

		const wrapperRef = { current: {} };
		const buttonRef = { current: {} };
		const menuOptionsRef = { current: {} };

		Object.defineProperty(wrapperRef, "current", {
			set(_current) {
				if (_current) {
					jest.spyOn(_current, "contains").mockReturnValue(true);
				}
				this._current = _current;
			},
			get() {
				return this._current;
			},
		});
		Object.defineProperty(buttonRef, "current", {
			set(_current) {
				if (_current) {
					jest.spyOn(_current, "contains").mockReturnValueOnce(true);
				}
				this._current = _current;
			},
			get() {
				return this._current;
			},
		});
		Object.defineProperty(menuOptionsRef, "current", {
			set(_current) {
				if (_current) {
					jest.spyOn(_current, "contains").mockReturnValueOnce(false);
				}
				this._current = _current;
			},
			get() {
				return this._current;
			},
		});

		useMockRef.mockReturnValueOnce(wrapperRef);
		useMockRef.mockReturnValueOnce(buttonRef);
		useMockRef.mockReturnValueOnce(menuOptionsRef);

		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<FloatingMenu {...defaultProps} />
			</ThemeProvider>,
		);
		const floatingMenu = screen.getByTestId("floating-menu");
		expect(floatingMenu).toBeInTheDocument();

		fireEvent.mouseEnter(floatingMenu);
		expect(screen.getByTestId("floating-menu-wrapper")).toBeInTheDocument();

		fireEvent.mouseLeave(floatingMenu);
		expect(screen.queryByTestId("floating-menu-wrapper")).not.toBeInTheDocument();
	});

	it("should close the floating div when clicking an element with data-close-menu", () => {
		const buttonContent = () => (
			<div>
				<span>trigger</span>
			</div>
		);

		const defaultProps: IFloatingProps = {
			children: (
				<span data-testid="menu-children" data-close-menu="true">
					Close
				</span>
			),
			Button: buttonContent,
			closeOnSelect: false,
		};

		const wrapperRef = { current: {} };
		const buttonRef = { current: {} };
		const menuOptionsRef = { current: {} };

		Object.defineProperty(wrapperRef, "current", {
			set(_current) {
				if (_current) {
					jest.spyOn(_current, "contains").mockReturnValue(true);
				}
				this._current = _current;
			},
			get() {
				return this._current;
			},
		});
		Object.defineProperty(buttonRef, "current", {
			set(_current) {
				if (_current) {
					// true for button click (open), false for option click
					jest.spyOn(_current, "contains").mockReturnValueOnce(true).mockReturnValueOnce(false);
				}
				this._current = _current;
			},
			get() {
				return this._current;
			},
		});
		Object.defineProperty(menuOptionsRef, "current", {
			set(_current) {
				if (_current) {
					// true when clicking menu-children (optionWasSelected)
					jest.spyOn(_current, "contains").mockReturnValueOnce(true);
				}
				this._current = _current;
			},
			get() {
				return this._current;
			},
		});

		useMockRef.mockReturnValueOnce(wrapperRef);
		useMockRef.mockReturnValueOnce(buttonRef);
		useMockRef.mockReturnValueOnce(menuOptionsRef);

		const { rerender } = render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<FloatingMenu {...defaultProps} />
			</ThemeProvider>,
		);

		const floatingMenu = screen.getByTestId("floating-menu");
		fireEvent.click(floatingMenu);
		expect(screen.getByTestId("floating-menu-wrapper")).toBeInTheDocument();

		rerender(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<FloatingMenu {...defaultProps} />
			</ThemeProvider>,
		);

		const menuChildren = screen.getByTestId("menu-children");
		fireEvent.click(menuChildren);

		expect(screen.queryByTestId("floating-menu-wrapper")).not.toBeInTheDocument();
	});

	it("should not open when disabled", () => {
		const buttonContent = () => <span>trigger</span>;

		const defaultProps: IFloatingProps = {
			children: <div>content</div>,
			Button: buttonContent,
			disabled: true,
		};

		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<FloatingMenu {...defaultProps} />
			</ThemeProvider>,
		);

		const buttonWrapper = screen.getByTestId("floating-menu-button");
		fireEvent.click(buttonWrapper);

		expect(screen.queryByTestId("floating-menu-wrapper")).not.toBeInTheDocument();
	});

	it("should not open on mouse enter when disabled", () => {
		const buttonContent = () => <span>trigger</span>;

		const defaultProps: IFloatingProps = {
			children: <div>content</div>,
			Button: buttonContent,
			reactiveToHover: true,
			disabled: true,
		};

		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<FloatingMenu {...defaultProps} />
			</ThemeProvider>,
		);

		const floatingMenu = screen.getByTestId("floating-menu");
		fireEvent.mouseEnter(floatingMenu);

		expect(screen.queryByTestId("floating-menu-wrapper")).not.toBeInTheDocument();
	});

	it("should call actionOnClose when clicking outside", () => {
		const actionOnClose = jest.fn();
		const buttonContent = () => <span>trigger</span>;

		const defaultProps: IFloatingProps = {
			children: <div>content</div>,
			Button: buttonContent,
			actionOnClose,
		};

		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<FloatingMenu {...defaultProps} />
			</ThemeProvider>,
		);

		// Open the menu
		const buttonWrapper = screen.getByTestId("floating-menu-button");
		fireEvent.click(buttonWrapper);
		expect(screen.getByTestId("floating-menu-wrapper")).toBeInTheDocument();

		// Click outside — document is not inside wrapper
		fireEvent.mouseDown(document);

		expect(actionOnClose).toHaveBeenCalledTimes(1);
		expect(screen.queryByTestId("floating-menu-wrapper")).not.toBeInTheDocument();
	});

	it("should call actionOnClose when closing via button toggle", () => {
		const actionOnClose = jest.fn();
		const buttonContent = () => <span>trigger</span>;

		const defaultProps: IFloatingProps = {
			children: <div>content</div>,
			Button: buttonContent,
			actionOnClose,
		};

		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<FloatingMenu {...defaultProps} />
			</ThemeProvider>,
		);

		const buttonWrapper = screen.getByTestId("floating-menu-button");

		fireEvent.click(buttonWrapper);
		expect(screen.getByTestId("floating-menu-wrapper")).toBeInTheDocument();

		fireEvent.click(buttonWrapper);

		expect(actionOnClose).toHaveBeenCalledTimes(1);
		expect(screen.queryByTestId("floating-menu-wrapper")).not.toBeInTheDocument();
	});

	it("should call actionOnClose when closing via mouseLeave", () => {
		const actionOnClose = jest.fn();
		const buttonContent = () => <span>trigger</span>;

		const defaultProps: IFloatingProps = {
			children: <div>content</div>,
			Button: buttonContent,
			reactiveToHover: true,
			actionOnClose,
		};

		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<FloatingMenu {...defaultProps} />
			</ThemeProvider>,
		);

		const buttonWrapper = screen.getByTestId("floating-menu-button");
		fireEvent.click(buttonWrapper);
		expect(screen.getByTestId("floating-menu-wrapper")).toBeInTheDocument();

		const floatingMenu = screen.getByTestId("floating-menu");
		fireEvent.mouseLeave(floatingMenu);

		expect(actionOnClose).toHaveBeenCalledTimes(1);
		expect(screen.queryByTestId("floating-menu-wrapper")).not.toBeInTheDocument();
	});

	it("should close the menu when clicking the button while open (toggle)", () => {
		const buttonContent = () => <span>trigger</span>;

		const defaultProps: IFloatingProps = {
			children: <span data-testid="menu-option">option</span>,
			Button: buttonContent,
		};

		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<FloatingMenu {...defaultProps} />
			</ThemeProvider>,
		);

		const buttonWrapper = screen.getByTestId("floating-menu-button");

		// First click: open
		fireEvent.click(buttonWrapper);
		expect(screen.getByTestId("floating-menu-wrapper")).toBeInTheDocument();

		// Second click on button: close
		fireEvent.click(buttonWrapper);
		expect(screen.queryByTestId("floating-menu-wrapper")).not.toBeInTheDocument();
	});

	it("should not close on mouse leave when reactiveToHover is false", () => {
		const buttonContent = () => <span>trigger</span>;

		const defaultProps: IFloatingProps = {
			children: <div>content</div>,
			Button: buttonContent,
			reactiveToHover: false,
		};

		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<FloatingMenu {...defaultProps} />
			</ThemeProvider>,
		);

		const buttonWrapper = screen.getByTestId("floating-menu-button");
		fireEvent.click(buttonWrapper);
		expect(screen.getByTestId("floating-menu-wrapper")).toBeInTheDocument();

		const floatingMenu = screen.getByTestId("floating-menu");
		fireEvent.mouseLeave(floatingMenu);

		// Still open — mouseLeave only works when reactiveToHover=true
		expect(screen.queryByTestId("floating-menu-wrapper")).toBeInTheDocument();
	});
});
