"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useNodeResizing = void 0;
const tslib_1 = require("tslib");
const react_1 = require("react");
const throttle_1 = tslib_1.__importDefault(require("lodash/throttle.js"));
const hooks_1 = require("./hooks.js");
const RESIZE_DELAY = 50;
const MIN_WIDTH = 40;
const THRESHOLD = 4;
const useNodeResizing = ({ width, height, onResize, ref, delay = RESIZE_DELAY, threshold = THRESHOLD, minWidth = MIN_WIDTH, }) => {
    const state = (0, hooks_1.useBooleanState)(false);
    const [resizing, , , toggleResizing] = state;
    const [initialWidth, setInitialWidth] = (0, react_1.useState)(width);
    const [initialHeight, setInitialHeight] = (0, react_1.useState)(height);
    const [currentWidth, setCurrentWidth] = (0, react_1.useState)(width);
    const [currentHeight, setCurrentHeight] = (0, react_1.useState)(height);
    // The dimensions specified as arguments take primacy over
    // the dimensions detected during the mouse movement.
    (0, react_1.useEffect)(() => {
        if (width !== initialWidth) {
            setCurrentWidth(width);
            setInitialWidth(width);
        }
        if (height !== initialHeight) {
            setCurrentHeight(height);
            setInitialHeight(height);
        }
    }, [width, height, initialWidth, initialHeight]);
    const startResizing = (event, direction) => {
        // prohibit the selection of text and other artifacts when resizing.
        event.preventDefault();
        const element = ref?.current;
        if (!element) {
            throw new Error('Reference element not found!');
        }
        const startX = event.pageX;
        const startWidth = element.getBoundingClientRect().width || 0;
        const startHeight = element.getBoundingClientRect().height || 0;
        let animationFrameId;
        const handleMouseMove = (0, throttle_1.default)((event) => {
            if (animationFrameId) {
                cancelAnimationFrame(animationFrameId);
            }
            animationFrameId = requestAnimationFrame(() => {
                const currentX = event.pageX;
                const diffX = currentX - startX;
                const newWidthByDirection = direction === 'right' ? startWidth + diffX : startWidth - diffX;
                if (Math.abs(newWidthByDirection - startWidth) >= threshold) {
                    const newWidth = newWidthByDirection >= minWidth ? newWidthByDirection : minWidth;
                    const newHeight = (startHeight / startWidth) * newWidth;
                    setCurrentWidth(newWidth);
                    setCurrentHeight(newHeight);
                    // If neither width nor height are provided, the width is set automatically.
                    const shouldSetWidth = !initialWidth &&
                        initialWidth !== 0 &&
                        !(initialWidth === null && initialHeight === null);
                    const shouldSetHeight = !initialHeight && initialHeight !== 0;
                    onResize?.({
                        width: shouldSetWidth ? undefined : newWidth,
                        height: shouldSetHeight ? undefined : newHeight,
                    });
                }
            });
        }, delay);
        const handleMouseUp = () => {
            document.removeEventListener('mousemove', handleMouseMove);
            document.removeEventListener('mouseup', handleMouseUp);
            toggleResizing();
            if (animationFrameId) {
                cancelAnimationFrame(animationFrameId);
            }
        };
        document.addEventListener('mousemove', handleMouseMove);
        document.addEventListener('mouseup', handleMouseUp);
        toggleResizing();
    };
    return {
        startResizing,
        state: {
            resizing,
            width: !initialWidth && initialWidth !== 0 ? undefined : currentWidth,
            height: !initialHeight && initialHeight !== 0 ? undefined : currentHeight,
        },
    };
};
exports.useNodeResizing = useNodeResizing;
//# sourceMappingURL=useNodeResizing.js.map
