"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.HorizontalDrag = exports.IN_RESIZE_CLASSNAME = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const lodash_1 = require("../lodash.js");
const MarkdownEditorView_1 = require("./MarkdownEditorView.js");
exports.IN_RESIZE_CLASSNAME = 'in-resize';
const useColResize = ({ onStart, onMove, onEnd }) => {
    const initialXPosition = (0, react_1.useRef)(0);
    const currentXPosition = (0, react_1.useRef)(0);
    const handleMove = (0, react_1.useCallback)((e) => {
        const currentX = 'touches' in e ? e.touches[0]?.clientX ?? 0 : e.clientX;
        if (currentXPosition.current === currentX) {
            return;
        }
        currentXPosition.current = currentX;
        const delta = initialXPosition.current - currentX;
        onMove(delta);
    }, [onMove]);
    const handleDragEnd = (0, react_1.useCallback)((e) => {
        window.removeEventListener('mousemove', handleMove);
        window.removeEventListener('touchmove', handleMove);
        document.body.style.removeProperty('user-select');
        const currentX = 'touches' in e ? e.touches[0]?.clientX ?? 0 : e.clientX;
        const delta = initialXPosition.current - currentX;
        onEnd(delta);
    }, [handleMove, onEnd]);
    const handleStart = (0, react_1.useCallback)((e) => {
        const currentX = 'touches' in e ? e.touches[0]?.clientX ?? 0 : e.clientX;
        initialXPosition.current = currentX;
        currentXPosition.current = currentX;
        window.addEventListener('mouseup', handleDragEnd, { once: true });
        window.addEventListener('touchend', handleDragEnd, { once: true });
        window.addEventListener('touchcancel', handleDragEnd, { once: true });
        window.addEventListener('mousemove', handleMove);
        window.addEventListener('touchmove', handleMove);
        document.body.style.setProperty('user-select', 'none');
        onStart();
    }, [handleDragEnd, handleMove, onStart]);
    return {
        listeners: {
            onMouseDown: handleStart,
            onTouchStart: handleStart,
        },
    };
};
const HorizontalDrag = ({ leftElRef, rightElRef, wrapperRef, editor, onEndMove, }) => {
    const cm = editor.cm;
    const [lCardWidth, lSetCardWidth] = (0, react_1.useState)((wrapperRef.current?.clientWidth ?? 0) / 2);
    const [rCardWidth, rSetCardWidth] = (0, react_1.useState)((wrapperRef.current?.clientWidth ?? 0) / 2);
    const updateWidth = (0, react_1.useCallback)((lNewWidth, rNewWidth) => {
        leftElRef.current?.style?.setProperty('width', `${lNewWidth}px`);
        rightElRef.current?.style?.setProperty('width', `${rNewWidth}px`);
    }, [leftElRef, rightElRef]);
    const calculateWidth = (0, react_1.useCallback)((delta) => [
        (0, lodash_1.clamp)(lCardWidth - delta, (wrapperRef.current?.clientWidth ?? 0) / 8, ((wrapperRef.current?.clientWidth ?? 0) * 3) / 4),
        (0, lodash_1.clamp)(rCardWidth + delta, (wrapperRef.current?.clientWidth ?? 0) / 8, ((wrapperRef.current?.clientWidth ?? 0) * 3) / 4),
    ], [lCardWidth, rCardWidth, wrapperRef]);
    // Set initially calculated width
    (0, react_1.useEffect)(() => {
        updateWidth(lCardWidth, rCardWidth);
        cm.requestMeasure();
    }, []);
    (0, react_1.useEffect)(() => {
        const [leftElCurrent, rightElCurrent] = [leftElRef.current, rightElRef.current];
        return () => {
            leftElCurrent?.classList.remove(exports.IN_RESIZE_CLASSNAME);
            rightElCurrent?.classList.remove(exports.IN_RESIZE_CLASSNAME);
            leftElCurrent?.style?.removeProperty('width');
            rightElCurrent?.style?.removeProperty('width');
        };
    }, [leftElRef, rightElRef]);
    const onStart = (0, react_1.useCallback)(() => {
        wrapperRef.current?.style.setProperty('user-select', 'none');
        leftElRef.current?.classList.add(exports.IN_RESIZE_CLASSNAME);
        rightElRef.current?.classList.add(exports.IN_RESIZE_CLASSNAME);
    }, [leftElRef, rightElRef, wrapperRef]);
    const onMove = (0, react_1.useCallback)((delta) => {
        const [lNewWidth, rNewWidth] = calculateWidth(delta);
        updateWidth(lNewWidth, rNewWidth);
    }, [calculateWidth, lCardWidth, rCardWidth, updateWidth]);
    const onEnd = (0, react_1.useCallback)((delta) => {
        const [lNewWidth, rNewWidth] = calculateWidth(delta);
        lSetCardWidth(lNewWidth);
        rSetCardWidth(rNewWidth);
        updateWidth(lNewWidth, rNewWidth);
        wrapperRef.current?.style.removeProperty('user-select');
        cm.requestMeasure();
        rightElRef.current?.classList.remove(exports.IN_RESIZE_CLASSNAME);
        leftElRef.current?.classList.remove(exports.IN_RESIZE_CLASSNAME);
        onEndMove?.(rightElRef.current, leftElRef.current);
    }, [calculateWidth, cm, leftElRef, rightElRef, updateWidth, wrapperRef]);
    const { listeners } = useColResize({ onStart, onMove, onEnd });
    return ((0, jsx_runtime_1.jsx)("div", { className: (0, MarkdownEditorView_1.cnEditorComponent)('resizer', { horizontal: true }), ...listeners, children: (0, jsx_runtime_1.jsx)("div", { className: (0, MarkdownEditorView_1.cnEditorComponent)('gutter') }) }));
};
const HorizontalDragWrapper = (props) => {
    // If component calling HorizontalDrag is not mounted, then most likely wrapperRef will be null
    if (!props.isMounted)
        return ((0, jsx_runtime_1.jsx)("div", { className: (0, MarkdownEditorView_1.cnEditorComponent)('resizer', { horizontal: true }), children: (0, jsx_runtime_1.jsx)("div", { className: (0, MarkdownEditorView_1.cnEditorComponent)('gutter') }) }));
    return (0, jsx_runtime_1.jsx)(HorizontalDrag, { ...props });
};
exports.HorizontalDrag = HorizontalDragWrapper;
//# sourceMappingURL=HorizontalDrag.js.map
