import { useState as M, useRef as C, useEffect as Y, useCallback as H, useLayoutEffect as N } from "react";
import { createPortal as O } from "react-dom";
import { getOrCreatePortalRoot as W } from "../utils/portalRoot.js";
const y = 4, v = "is-dragging", s = (a, e, o) => Math.min(o, Math.max(e, a)), R = (a) => a?.current?.getBoundingClientRect() ?? null, I = (a, e, o) => a === "container" && o ? {
  top: s(
    (o.height - e.height) / 2,
    0,
    Math.max(0, o.height - e.height)
  ),
  left: s(
    (o.width - e.width) / 2,
    0,
    Math.max(0, o.width - e.width)
  )
} : {
  top: s(
    (window.innerHeight - e.height) / 2,
    0,
    Math.max(0, window.innerHeight - e.height)
  ),
  left: s(
    (window.innerWidth - e.width) / 2,
    0,
    Math.max(0, window.innerWidth - e.width)
  )
}, j = (a = {}) => {
  const { positioning: e = "viewport", initialPosition: o, collisionContainerRef: d } = a, [u, D] = M(!1), [g, p] = M({ top: 0, left: 0, hasDragged: !1 }), [x, L] = M(null), h = C(null), w = C(null), c = e === "viewport";
  Y(() => {
    if (!c) {
      L(null);
      return;
    }
    L(W());
  }, [c]);
  const S = H(
    (t, r) => {
      if (!c)
        return t;
      const n = r ?? x;
      return n ? O(t, n) : null;
    },
    [c, x]
  );
  N(() => {
    if (g.hasDragged || !o)
      return;
    const t = h.current;
    if (!t)
      return;
    const r = o === "center" ? I(
      e,
      t.getBoundingClientRect(),
      R(d)
    ) : o;
    p(
      (n) => n.top === r.top && n.left === r.left ? n : { top: r.top, left: r.left, hasDragged: !1 }
    );
  }, [d, o, g.hasDragged, e]);
  const T = H((t) => {
    if (t.button !== 0)
      return;
    t.preventDefault(), t.stopPropagation();
    const r = h.current;
    if (!r)
      return;
    const n = r.getBoundingClientRect();
    w.current = {
      offsetX: t.clientX - n.left,
      offsetY: t.clientY - n.top,
      startX: t.clientX,
      startY: t.clientY,
      hasMoved: !1
    }, D(!0);
  }, []);
  return Y(() => {
    if (!u)
      return;
    const t = document.documentElement;
    t.classList.add(v);
    const r = (B) => {
      const i = w.current, P = h.current;
      if (!i || !P)
        return;
      const { clientX: m, clientY: E } = B, _ = Math.hypot(m - i.startX, E - i.startY);
      if (!i.hasMoved && _ < y)
        return;
      i.hasMoved || (i.hasMoved = !0);
      const f = P.getBoundingClientRect(), l = R(d);
      if (e === "container" && l) {
        const A = s(
          m - l.left - i.offsetX,
          0,
          Math.max(0, l.width - f.width)
        ), G = s(
          E - l.top - i.offsetY,
          0,
          Math.max(0, l.height - f.height)
        );
        p({
          top: G,
          left: A,
          hasDragged: !0
        });
        return;
      }
      const X = {
        left: s(m - i.offsetX, 0, Math.max(0, window.innerWidth - f.width)),
        top: s(E - i.offsetY, 0, Math.max(0, window.innerHeight - f.height))
      };
      p({
        top: X.top,
        left: X.left,
        hasDragged: !0
      });
    }, n = () => {
      t.classList.remove(v), D(!1), w.current = null;
    };
    return window.addEventListener("pointermove", r), window.addEventListener("pointerup", n), window.addEventListener("pointercancel", n), () => {
      window.removeEventListener("pointermove", r), window.removeEventListener("pointerup", n), window.removeEventListener("pointercancel", n), t.classList.remove(v);
    };
  }, [d, u, e]), { draggableRef: h, isDragging: u, position: g, onDragHandleDown: T, renderElement: S };
};
export {
  j as default
};
//# sourceMappingURL=useDraggableElement.js.map
