import { DndContext, KeyboardSensor, PointerSensor, closestCenter, useDroppable, useSensor, useSensors } from '@dnd-kit/core';
import { SortableContext, sortableKeyboardCoordinates } from '@dnd-kit/sortable';
import React, { useCallback, useId } from 'react';
const DraggableSortable = (props)=>{
    const { children, className, ids, onDragEnd } = props;
    const id = useId();
    const { setNodeRef } = useDroppable({
        id
    });
    const sensors = useSensors(useSensor(PointerSensor, {
        activationConstraint: {
            distance: 5
        }
    }), useSensor(KeyboardSensor, {
        coordinateGetter: sortableKeyboardCoordinates
    }));
    const handleDragEnd = useCallback((event)=>{
        const { active, over } = event;
        if (!active || !over) return;
        if (typeof onDragEnd === 'function') {
            onDragEnd({
                event,
                moveFromIndex: ids.findIndex((_id)=>_id === active.id),
                moveToIndex: ids.findIndex((_id)=>_id === over.id)
            });
        }
    }, [
        onDragEnd,
        ids
    ]);
    return /*#__PURE__*/ React.createElement(DndContext, {
        collisionDetection: closestCenter,
        id: id,
        onDragEnd: handleDragEnd,
        sensors: sensors
    }, /*#__PURE__*/ React.createElement(SortableContext, {
        items: ids
    }, /*#__PURE__*/ React.createElement("div", {
        className: className,
        ref: setNodeRef
    }, children)));
};
export default DraggableSortable;

//# sourceMappingURL=index.js.map