"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const types = require("../../../../utils/types.js");
const style = require("../../../../utils/dom/style.js");
const index = require("../../../../hooks/use-namespace/index.js");
const vue = require("vue");
function useDragTag({ wrapperRef, handleDragged, afterDragged }) {
  const ns = index.useNamespace("input-tag");
  const dropIndicatorRef = vue.shallowRef();
  const showDropIndicator = vue.ref(false);
  let draggingIndex;
  let draggingTag;
  let dropIndex;
  let dropType;
  function getTagClassName(index2) {
    return `.${ns.e("inner")} .${ns.namespace.value}-tag:nth-child(${index2 + 1})`;
  }
  function handleDragStart(event, index2) {
    draggingIndex = index2;
    draggingTag = wrapperRef.value.querySelector(getTagClassName(index2));
    if (draggingTag) draggingTag.style.opacity = "0.5";
    event.dataTransfer.effectAllowed = "move";
  }
  function handleDragOver(event, index2) {
    dropIndex = index2;
    event.preventDefault();
    event.dataTransfer.dropEffect = "move";
    if (types.isUndefined(draggingIndex) || draggingIndex === index2) {
      showDropIndicator.value = false;
      return;
    }
    const dropPosition = wrapperRef.value.querySelector(getTagClassName(index2)).getBoundingClientRect();
    const dropPrev = !(draggingIndex + 1 === index2);
    const dropNext = !(draggingIndex - 1 === index2);
    const distance = event.clientX - dropPosition.left;
    const prevPercent = dropPrev ? dropNext ? 0.5 : 1 : -1;
    const nextPercent = dropNext ? dropPrev ? 0.5 : 0 : 1;
    if (distance <= dropPosition.width * prevPercent) dropType = "before";
    else if (distance > dropPosition.width * nextPercent) dropType = "after";
    else dropType = void 0;
    const innerEl = wrapperRef.value.querySelector(`.${ns.e("inner")}`);
    const innerPosition = innerEl.getBoundingClientRect();
    const gap = Number.parseFloat(style.getStyle(innerEl, "gap")) / 2;
    const indicatorTop = dropPosition.top - innerPosition.top;
    let indicatorLeft = -9999;
    if (dropType === "before") indicatorLeft = Math.max(dropPosition.left - innerPosition.left - gap, Math.floor(-gap / 2));
    else if (dropType === "after") {
      const left = dropPosition.right - innerPosition.left;
      indicatorLeft = left + (innerPosition.width === left ? Math.floor(gap / 2) : gap);
    }
    style.setStyle(dropIndicatorRef.value, {
      top: `${indicatorTop}px`,
      left: `${indicatorLeft}px`
    });
    showDropIndicator.value = !!dropType;
  }
  function handleDragEnd(event) {
    event.preventDefault();
    if (draggingTag) draggingTag.style.opacity = "";
    if (dropType && !types.isUndefined(draggingIndex) && !types.isUndefined(dropIndex) && draggingIndex !== dropIndex) handleDragged(draggingIndex, dropIndex, dropType);
    showDropIndicator.value = false;
    draggingIndex = void 0;
    draggingTag = null;
    dropIndex = void 0;
    dropType = void 0;
    afterDragged == null ? void 0 : afterDragged();
  }
  return {
    dropIndicatorRef,
    showDropIndicator,
    handleDragStart,
    handleDragOver,
    handleDragEnd
  };
}
exports.useDragTag = useDragTag;
