"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FloatingPlusControl = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const react_use_1 = require("react-use");
const use_raf_throttle_1 = require("../../hooks/use-raf-throttle.js");
const FloatingPlusButton_1 = require("../FloatingPlusButton/index.js");
exports.FloatingPlusControl = (0, react_1.memo)(function YfmTableRowFloatingPlusControl({ type, index, cellElem, tableElem, onClick }) {
    const anchor = (0, react_1.useMemo)(() => ({
        contextElement: tableElem,
        getBoundingClientRect() {
            const cellRect = cellElem.getBoundingClientRect();
            const tableRect = tableElem.getBoundingClientRect();
            return type === 'row'
                ? {
                    x: tableRect.x,
                    y: cellRect.y,
                    width: tableRect.width,
                    height: cellRect.height,
                    top: cellRect.top,
                    left: tableRect.left,
                    right: tableRect.right,
                    bottom: cellRect.top,
                }
                : {
                    x: cellRect.x,
                    y: tableRect.y,
                    width: cellRect.width,
                    height: tableRect.height,
                    top: tableRect.top,
                    left: cellRect.left,
                    right: cellRect.right,
                    bottom: tableRect.top,
                };
        },
    }), [cellElem, tableElem, type]);
    const [visible, setVisible] = (0, react_1.useState)(() => shouldBeVisible(type, cellElem, tableElem));
    const buttonRef = (0, react_1.useRef)(null);
    const updateVisibility = () => {
        const newVisible = shouldBeVisible(type, cellElem, tableElem);
        if (visible !== newVisible)
            setVisible(newVisible);
    };
    const onChange = (0, use_raf_throttle_1.useRafThrottle)(() => {
        buttonRef.current?.forceUpdate();
        updateVisibility();
    });
    // Update after first render
    (0, react_use_1.useEffectOnce)(updateVisibility);
    (0, react_1.useEffect)(() => {
        if (type !== 'column')
            return undefined;
        const observer = new ResizeObserver(onChange);
        observer.observe(tableElem);
        tableElem.addEventListener('scroll', onChange);
        return () => {
            observer.unobserve(tableElem);
            tableElem.removeEventListener('scroll', onChange);
        };
    }, [tableElem, onChange, type]);
    return ((0, jsx_runtime_1.jsx)(FloatingPlusButton_1.FloatingPlusButton, { ref: buttonRef, anchor: anchor, type: type, onClick: () => onClick(index), floatingStyles: visible ? undefined : { display: 'none' } }));
});
function shouldBeVisible(type, cellElem, tableElem) {
    if (type !== 'column')
        return true;
    const THRESHOLD = 4; // px
    const cellRect = cellElem.getBoundingClientRect();
    const tableRect = tableElem.getBoundingClientRect();
    return (tableRect.left - cellRect.right <= THRESHOLD &&
        cellRect.right - tableRect.right <= THRESHOLD);
}
//# sourceMappingURL=FloatingPlusControl.js.map
