/**
 * ldesign v0.2.22
 * (c) 2022/12/7 16:21 built by swimly
 * @license MIT
 */

import throttle from 'lodash/throttle';
import { reactive } from '@vue/composition-api';

function useDraggable(props, root) {
  const dragStates = reactive({
    isDragOver: false,
    isDragging: false,
    dropPosition: 0
  });
  const updateDropPosition = dragEvent => {
    const rootNode = root.value;
    if (!rootNode) return;
    const rect = rootNode?.getBoundingClientRect?.();
    const offsetY = window.pageYOffset + rect.top;
    const {
      pageY
    } = dragEvent;
    const gapHeight = rect.height / 4;
    const diff = pageY - offsetY;
    if (diff < gapHeight) dragStates.dropPosition = -1;else if (diff < rect.height - gapHeight) dragStates.dropPosition = 0;else dragStates.dropPosition = 1;
  };
  const setDragStatus = (status, dragEvent) => {
    const {
      node,
      treeScope
    } = props;
    const {
      drag
    } = treeScope;
    if (!drag) return;
    switch (status) {
      case "dragStart":
        dragStates.isDragging = true;
        dragStates.dropPosition = 0;
        drag.handleDragStart?.({
          node,
          dragEvent
        });
        break;
      case "dragEnd":
        dragStates.isDragging = false;
        dragStates.isDragOver = false;
        dragStates.dropPosition = 0;
        throttleUpdateDropPosition.cancel();
        drag.handleDragEnd?.({
          node,
          dragEvent
        });
        break;
      case "dragOver":
        dragStates.isDragOver = true;
        throttleUpdateDropPosition(dragEvent);
        drag.handleDragOver?.({
          node,
          dragEvent
        });
        break;
      case "dragLeave":
        dragStates.isDragOver = false;
        dragStates.dropPosition = 0;
        throttleUpdateDropPosition.cancel();
        drag.handleDragLeave?.({
          node,
          dragEvent
        });
        break;
      case "drop":
        drag.handleDrop?.({
          node,
          dropPosition: dragStates.dropPosition,
          dragEvent
        });
        dragStates.isDragOver = false;
        throttleUpdateDropPosition.cancel();
        break;
      default:
        break;
    }
  };
  const handleDragStart = evt => {
    const {
      node
    } = props;
    if (!node.isDraggable()) return;
    evt.stopPropagation();
    setDragStatus("dragStart", evt);
    try {
      evt.dataTransfer?.setData("text/plain", "");
    } catch (e) {}
  };
  const handleDragEnd = evt => {
    const {
      node
    } = props;
    if (!node.isDraggable()) return;
    evt.stopPropagation();
    setDragStatus("dragEnd", evt);
  };
  const handleDragOver = evt => {
    const {
      node
    } = props;
    if (!node.isDraggable()) return;
    evt.stopPropagation();
    evt.preventDefault();
    setDragStatus("dragOver", evt);
  };
  const handleDragLeave = evt => {
    const {
      node
    } = props;
    if (!node.isDraggable()) return;
    evt.stopPropagation();
    setDragStatus("dragLeave", evt);
  };
  const handleDrop = evt => {
    const {
      node
    } = props;
    if (!node.isDraggable()) return;
    evt.stopPropagation();
    evt.preventDefault();
    setDragStatus("drop", evt);
  };
  const throttleUpdateDropPosition = throttle(dragEvent => {
    updateDropPosition(dragEvent);
  });
  return {
    dragStates,
    handleDragStart,
    handleDragEnd,
    handleDragOver,
    handleDragLeave,
    handleDrop
  };
}

export { useDraggable as default };
//# sourceMappingURL=useDraggable.js.map
