import { jsx as _jsx } from "react/jsx-runtime";
// (C) 2007-2026 GoodData Corporation
import { useCallback, useEffect, useRef, useState } from "react";
import { calculateMenuPosition, getElementDimensions, getElementDimensionsAndCoords, getViewportDimensionsAndCoords, } from "./positioningCalculations.js";
export function PositionedMenuContent(props) {
    const [state, setState] = useState({
        left: 0,
        top: 0,
    });
    const menuElRef = useRef(null);
    const positionMenu = useCallback(() => {
        if (!props.togglerEl || !menuElRef.current) {
            return;
        }
        const { left, top } = calculateMenuPosition({
            toggler: getElementDimensionsAndCoords(props.togglerEl),
            menu: getElementDimensions(menuElRef.current),
            viewport: getViewportDimensionsAndCoords(),
            alignment: props.alignment,
            spacing: props.spacing,
            offset: props.offset,
            topLevelMenu: props.topLevelMenu,
        });
        setState({ left, top });
    }, [props.togglerEl, props.alignment, props.spacing, props.offset, props.topLevelMenu]);
    const addEventListeners = useCallback(() => {
        window.addEventListener("resize", positionMenu);
        window.addEventListener("scroll", positionMenu, true);
    }, [positionMenu]);
    const removeEventListeners = useCallback(() => {
        window.removeEventListener("resize", positionMenu);
        window.removeEventListener("scroll", positionMenu, true);
    }, [positionMenu]);
    useEffect(() => {
        positionMenu();
        addEventListeners();
        return () => {
            removeEventListeners();
        };
    }, [positionMenu, addEventListeners, removeEventListeners]);
    useEffect(() => {
        positionMenu();
    }, [
        props.alignment,
        props.spacing,
        props.offset,
        props.topLevelMenu,
        props.togglerEl,
        props.children,
        positionMenu,
    ]);
    return (_jsx("div", { style: {
            position: "absolute",
            left: state.left,
            top: state.top,
        }, ref: menuElRef, children: props.children }));
}
