import React, { useCallback, useMemo } from 'react';
import { useDndBasicTableScrollModifier } from '../../../hooks/useDndBasicTableScrollModifier';
import { useDraggingCrosswalk } from '../hooks/useDraggingCrosswalk';
import { snapCenterToCursor } from '@dnd-kit/modifiers';
import { DndContext, DragOverlay, MouseSensor, useSensor, useSensors } from '@dnd-kit/core';
import { CrosswalkDragPreview } from '../CrosswalkDragPreview';
export var CrosswalkDndComponent = function (_a) {
    var children = _a.children, tableRef = _a.tableRef;
    var _b = useDndBasicTableScrollModifier({ tableRef: tableRef }), scrollModifier = _b.scrollModifier, stopScroll = _b.stopScroll;
    var dragOverlayStyles = useMemo(function () { return ({ width: 'max-content' }); }, []);
    var _c = useDraggingCrosswalk(), draggingCrosswalk = _c.draggingCrosswalk, onDragEndCrosswalk = _c.onDragEnd, onDragStart = _c.onDragStart;
    var onDragEnd = useCallback(function () {
        onDragEndCrosswalk();
        stopScroll();
    }, [onDragEndCrosswalk, stopScroll]);
    var dndContextModifiers = useMemo(function () { return [scrollModifier]; }, [scrollModifier]);
    var dragOverlayModifiers = useMemo(function () { return [snapCenterToCursor]; }, []);
    var mouseSensor = useSensor(MouseSensor);
    var sensors = useSensors(mouseSensor);
    return (React.createElement(DndContext, { sensors: sensors, modifiers: dndContextModifiers, autoScroll: false, onDragStart: onDragStart, onDragEnd: onDragEnd },
        React.createElement(DragOverlay, { style: dragOverlayStyles, modifiers: dragOverlayModifiers, dropAnimation: null },
            React.createElement(CrosswalkDragPreview, { crosswalk: draggingCrosswalk })),
        children));
};
