// src/components/table-properties/draggable-list.ts
import * as React from "react";
function useDraggableList(items, getId, onReorder) {
  const [dragId, setDragId] = React.useState(null);
  const [overId, setOverId] = React.useState(null);
  function getItemProps(id) {
    return {
      draggable: true,
      onDragStart: (e) => {
        e.dataTransfer.effectAllowed = "move";
        setDragId(id);
      },
      onDragOver: (e) => {
        e.preventDefault();
        e.dataTransfer.dropEffect = "move";
        setOverId(id);
      },
      onDrop: (e) => {
        e.preventDefault();
        if (!dragId || dragId === id) {
          setDragId(null);
          setOverId(null);
          return;
        }
        const from = items.findIndex((i) => getId(i) === dragId);
        const to = items.findIndex((i) => getId(i) === id);
        if (from === -1 || to === -1) {
          setDragId(null);
          setOverId(null);
          return;
        }
        const next = [...items];
        const [moved] = next.splice(from, 1);
        next.splice(to, 0, moved);
        onReorder(next);
        setDragId(null);
        setOverId(null);
      },
      onDragEnd: () => {
        setDragId(null);
        setOverId(null);
      },
      "data-dragging": dragId === id,
      "data-over": overId === id && dragId !== id
    };
  }
  return { dragId, overId, getItemProps };
}
export {
  useDraggableList
};
//# sourceMappingURL=draggable-list.js.map