'use client';
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
import { closestCenter, DndContext, KeyboardSensor, PointerSensor, useDroppable, useSensor, useSensors } from '@dnd-kit/core';
import { SortableContext, sortableKeyboardCoordinates } from '@dnd-kit/sortable';
import React, { useCallback, useId } from 'react';
export const DraggableSortable = (props)=>{
    const { children, className, ids, onDragEnd, onDragStart } = 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;
        event.activatorEvent.stopPropagation();
        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
    ]);
    const handleDragStart = useCallback((event)=>{
        const { active } = event;
        if (!active) {
            return;
        }
        if (typeof onDragStart === 'function') {
            onDragStart({
                id: active.id,
                event
            });
        }
    }, [
        onDragStart
    ]);
    return /*#__PURE__*/ _jsxDEV(DndContext, {
        collisionDetection: closestCenter,
        id: id,
        onDragEnd: handleDragEnd,
        onDragStart: handleDragStart,
        sensors: sensors,
        children: /*#__PURE__*/ _jsxDEV(SortableContext, {
            items: ids,
            children: /*#__PURE__*/ _jsxDEV("div", {
                className: className,
                ref: setNodeRef,
                children: children
            }, void 0, false, {
                fileName: "src/elements/DraggableSortable/index.tsx",
                lineNumber: 85,
                columnNumber: 9
            }, this)
        }, void 0, false, {
            fileName: "src/elements/DraggableSortable/index.tsx",
            lineNumber: 84,
            columnNumber: 7
        }, this)
    }, void 0, false, {
        fileName: "src/elements/DraggableSortable/index.tsx",
        lineNumber: 77,
        columnNumber: 5
    }, this);
};

//# sourceMappingURL=index.js.map