import { useRef as C, useCallback as x, useEffect as $ } from "react";
import E from "../../../../../_virtual/interact.min.js";
import { a as H } from "../../../../sdk/dist/shared/chunk-AQPN5SE2.js";
import "../../../../sdk/dist/shared/chunk-DQXDGV67.js";
import "@sinclair/typebox";
import "../../../../sdk/dist/shared/chunk-7DMUDZ4H.js";
import "../../../../sdk/dist/shared/chunk-LSPN22SI.js";
import "../../../../sdk/dist/shared/chunk-ETYYRWLK.js";
import "../../../../sdk/dist/shared/chunk-4TH3C76A.js";
import "../../../../sdk/dist/shared/chunk-FKNNTHWX.js";
import "../../../../sdk/dist/shared/chunk-JS4K5JRM.js";
import "../../../../sdk/dist/shared/chunk-WU6Q4WYD.js";
import "../../../../sdk/dist/shared/chunk-QISTDGPP.js";
import "../../../../sdk/dist/shared/chunk-LFQZRGHS.js";
import "../../../../sdk/dist/shared/chunk-SLRU4CT6.js";
import "../../../../sdk/dist/shared/chunk-TTTXV7TJ.js";
import "../../../../sdk/dist/shared/chunk-UHF6IEKV.js";
import "../../../../sdk/dist/shared/chunk-LGP6GWIY.js";
import "../../../../sdk/dist/shared/chunk-X43MB5WD.js";
import "../../../../sdk/dist/shared/chunk-NNI225RG.js";
import "../../../../sdk/dist/shared/chunk-ZQGNYK5I.js";
import "../../../../sdk/dist/shared/chunk-KHFNN4P3.js";
import "../../../../sdk/dist/shared/chunk-BZGNY7LB.js";
import "../../../../sdk/dist/shared/chunk-IIFTGWFZ.js";
import "../../../../sdk/dist/shared/chunk-UU2MSQXY.js";
import "../../../../sdk/dist/shared/chunk-T3LIA4YB.js";
import "../../../../sdk/dist/shared/chunk-YBGPPF7T.js";
import "../../../../sdk/dist/shared/chunk-UMHXXXVP.js";
import "../../../../sdk/dist/shared/chunk-5N6MBJJ4.js";
import { usePreviewMode as A } from "../../../../../use-editor.js";
function me(o, R) {
  const h = C(/* @__PURE__ */ new Set()), c = C(null), r = A(), { gridSnap: n, onResizeStart: S, onResize: k, onResizeEnd: M, enabled: b = !0 } = R, T = x((l) => {
    if (!l?.classList.contains("resizable-handle")) return "";
    const m = Array.from(l.classList).find((d) => d.startsWith("resizable-handle-"));
    return m ? m.replace("resizable-handle-", "") : "";
  }, []), w = x(
    (l, m, d, u, p) => ({
      target: l,
      rect: m,
      deltaRect: d,
      edges: u,
      activeDirection: T(p || null)
    }),
    [T]
  ), z = x(() => {
    if (!b) return;
    h.current.forEach((m) => m.unset()), h.current.clear(), document.querySelectorAll(o).forEach((m) => {
      const d = m;
      if (!d.querySelector(".resizable-handle")) return;
      const p = E(d, {
        preventDefault: "always"
      }).resizable({
        edges: {
          top: ".resizable-handle-n, .resizable-handle-ne, .resizable-handle-nw",
          right: ".resizable-handle-e, .resizable-handle-ne, .resizable-handle-se",
          bottom: ".resizable-handle-s, .resizable-handle-se, .resizable-handle-sw",
          left: ".resizable-handle-w, .resizable-handle-nw, .resizable-handle-sw"
        },
        listeners: {
          start(e) {
            const s = e.target, i = s.getBoundingClientRect(), a = e.interaction.downEvent?.target;
            s.classList.toggle("resizing", !0), L(s, i.width, i.height, e);
            const t = w(
              s,
              { width: i.width, height: i.height },
              { left: 0, top: 0, width: 0, height: 0 },
              e.edges,
              a
            );
            S?.(t);
          },
          move(e) {
            const s = e.target;
            let { width: i, height: a } = e.rect;
            const t = H[s.dataset.brickType || "unknown"] || {};
            t.minWidth?.[r] && (i = Math.max(i, t.minWidth[r])), t.minHeight?.[r] && (a = Math.max(a, t.minHeight[r])), t.maxWidth?.[r] && (i = Math.min(i, t.maxWidth[r])), t.maxHeight?.[r] && (a = Math.min(a, t.maxHeight[r])), L(s, i, a, e), e.edges.left, e.edges.right, e.edges.top, e.edges.bottom;
            const g = e.interaction.downEvent?.target, f = w(
              s,
              { width: i, height: a },
              e.deltaRect,
              e.edges,
              g
            );
            k?.(f);
          },
          end(e) {
            e.stopPropagation();
            const s = e.target, i = s.getBoundingClientRect(), a = e.interaction.downEvent?.target;
            s.classList.toggle("resizing", !1);
            const t = w(
              s,
              { width: i.width, height: i.height },
              e.deltaRect,
              e.edges,
              a
            );
            M?.(t);
          }
        },
        modifiers: [
          E.modifiers.restrictSize({
            // @ts-ignore
            min: (e, s, i) => {
              const t = i.element.dataset.brickType;
              if (!t)
                return { width: n.width, height: n.height };
              const g = H[t], f = g.minWidth?.[r] ?? n.width, y = g.minHeight?.[r] ?? n.height;
              return { width: f, height: y };
            },
            // @ts-ignore
            max: (e, s, i) => {
              const a = i.element, t = a.parentElement, g = t.clientHeight - parseFloat(getComputedStyle(t).paddingTop) - parseFloat(getComputedStyle(t).paddingBottom), f = a.dataset.brickType;
              if (!f)
                return { width: 1 / 0, height: g };
              const y = H[f], v = y.maxWidth?.[r] ?? 1 / 0, N = y.maxHeight?.[r] ?? 1 / 0;
              return { width: v, height: N };
            }
          }),
          ...n?.enabled !== !1 && n ? [
            E.modifiers.snapSize({
              endOnly: !0,
              targets: [
                E.snappers.grid({
                  width: n.width,
                  height: n.height,
                  offset: n.offset || { x: 0, y: 0 },
                  range: n.range || 1 / 0
                })
              ]
            })
          ] : []
        ].filter(Boolean)
      });
      p.on("resizeend", function() {
        window.addEventListener("click", (e) => e.stopImmediatePropagation(), {
          capture: !0,
          once: !0
        });
      }), h.current.add(p);
    });
  }, [b, o, r, n, S, k, M, w]), W = x(() => {
    c.current && c.current.disconnect(), c.current = new MutationObserver((l) => {
      l.some((d) => {
        if (d.type !== "childList") return !1;
        const u = (p) => Array.from(p).some(
          (e) => e.nodeType === Node.ELEMENT_NODE && (e.matches?.(o) || e.querySelector?.(o))
        );
        return u(d.addedNodes) || u(d.removedNodes);
      }) && setTimeout(z, 100);
    }), c.current.observe(document.body, {
      childList: !0,
      subtree: !0
    });
  }, [o, z]);
  $(() => (b ? (z(), W()) : (h.current.forEach((l) => l.unset()), h.current.clear(), c.current && c.current.disconnect()), () => {
    h.current.forEach((l) => l.unset()), h.current.clear(), c.current && c.current.disconnect();
  }), [b, z, W]);
}
function L(o, R, h, c) {
  let { x: r = 0, y: n = 0 } = o.dataset;
  r = (parseFloat(`${r}`) || 0) + c.deltaRect.left, n = (parseFloat(`${n}`) || 0) + c.deltaRect.top, requestAnimationFrame(() => {
    o.style.width = `${R}px`, o.style.height = `${h}px`, o.style.setProperty("flex-grow", "0"), o.style.transform = `translate(${r}px, ${n}px)`;
  });
}
export {
  me as useResizable
};
//# sourceMappingURL=use-resizable.js.map
