import React, { useState, useRef, useEffect } from 'react';
import classNames from 'classnames';
import throttle from 'lodash/throttle';
import { classes } from './TableResizeHandle.st.css.js';
const TableResizeHandle = ({ onResize, onResizeStart, onResizeEnd, columnId, currentWidth, dataHook, disabled = false, skin = 'standard', }) => {
    const [isDragging, setIsDragging] = useState(false);
    const [dragStartX, setDragStartX] = useState(0);
    const [dragStartWidth, setDragStartWidth] = useState(0);
    const throttledOnResize = useRef(null);
    useEffect(() => {
        throttledOnResize.current = throttle((columnId, desiredNewWidth) => {
            onResize(columnId, desiredNewWidth);
        }, 20);
        return () => {
            throttledOnResize.current?.cancel();
        };
    }, [onResize]);
    useEffect(() => {
        if (isDragging) {
            document.body.style.cursor = 'col-resize';
            document.body.style.userSelect = 'none';
        }
        else {
            document.body.style.cursor = '';
            document.body.style.userSelect = '';
        }
        return () => {
            document.body.style.cursor = '';
            document.body.style.userSelect = '';
        };
    }, [isDragging]);
    useEffect(() => {
        const handleMouseMove = (e) => {
            if (!isDragging)
                return;
            // Calculate how far the mouse has moved from the initial drag position
            const mouseDeltaX = e.clientX - dragStartX;
            // Calculate the desired new width based on original width + mouse movement
            const desiredNewWidth = dragStartWidth + mouseDeltaX;
            throttledOnResize.current(columnId, desiredNewWidth);
        };
        const handleMouseUp = (e) => {
            if (isDragging) {
                setIsDragging(false);
                // Flush any pending throttled calls to ensure final state is accurate
                throttledOnResize.current.flush();
                if (onResizeEnd) {
                    onResizeEnd(columnId, e);
                }
            }
        };
        if (isDragging) {
            document.addEventListener('mousemove', handleMouseMove);
            document.addEventListener('mouseup', handleMouseUp);
        }
        return () => {
            document.removeEventListener('mousemove', handleMouseMove);
            document.removeEventListener('mouseup', handleMouseUp);
            // Cancel any pending throttled calls on cleanup
            throttledOnResize.current?.cancel();
        };
    }, [isDragging, dragStartX, dragStartWidth, columnId, onResizeEnd]);
    const handleMouseDown = (e) => {
        if (disabled)
            return;
        e.preventDefault();
        e.stopPropagation();
        setDragStartX(e.clientX);
        setDragStartWidth(currentWidth);
        setIsDragging(true);
        if (onResizeStart) {
            onResizeStart(columnId, e.nativeEvent);
        }
    };
    const blockClickEvents = (e) => {
        e.preventDefault();
        e.stopPropagation();
    };
    return (React.createElement("div", { className: classNames({
            [classes.dragging]: isDragging,
            [classes.disabled]: disabled,
            [classes.resizeHandle]: !disabled,
            [classes.skinStandard]: !skin || skin === 'standard',
            [classes.skinNeutral]: skin === 'neutral',
        }), onMouseDown: handleMouseDown, onClick: blockClickEvents, "data-hook": dataHook }));
};
export default TableResizeHandle;
//# sourceMappingURL=TableResizeHandle.js.map