import { j as t } from "../../../../../_virtual/jsx-runtime.js";
import { useRef as z, useState as I, useEffect as re, useCallback as F, startTransition as ie } from "react";
import { useSelectedBrickId as ne, usePreviewMode as se, usePanel as ae, useEditorHelpers as le, useDraggingBrickType as ce, useIsMouseOverPanel as pe } from "../../../../../use-editor.js";
import "../../../../../node_modules/.pnpm/@formkit_auto-animate@0.8.2/node_modules/@formkit/auto-animate/index.js";
import { useFloating as de, useHover as me, safePolygon as ue, useInteractions as fe, useMergeRefs as ge, FloatingPortal as he } from "../../../../../node_modules/.pnpm/@floating-ui_react@0.27.5_react-dom@18.3.0-canary-3d9b20132-20240124_react@18.3.0-canar_a24392231050a9f8f49324b799f3b6ce/node_modules/@floating-ui/react/dist/floating-ui.react.js";
import "../../../../../node_modules/.pnpm/react-hot-toast@2.5.2_react-dom@18.3.0-canary-3d9b20132-20240124_react@18.3.0-canary-3d_c02c1e17bf76c343fd22d1f22394ecf5/node_modules/react-hot-toast/dist/index.js";
import xe from "../../shared/components/BrickComponent.js";
import { useBrickWrapperStyle as be } from "../../shared/hooks/use-brick-style.js";
import { useBrickManifest as N } from "../../shared/hooks/use-brick-manifest.js";
import { tx as S } from "../../../../style-system/dist/twind.js";
import p from "./ResizeHandle.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 { getBrickResizeOptions as ye } from "../../shared/utils/layout-utils.js";
import we from "../hooks/use-is-hovered.js";
import { usePageQueries as ve, useDraftHelpers as ke, useSectionByBrickId as je } from "../../../../../use-page-data.js";
import { MdRepeat as Be } from "../../../../../node_modules/.pnpm/react-icons@5.3.0_react@18.3.0-canary-3d9b20132-20240124/node_modules/react-icons/md/index.js";
import { useSortable as Pe } from "../../../../../node_modules/.pnpm/@dnd-kit_react@0.1.21_react-dom@18.3.0-canary-3d9b20132-20240124_react@18.3.0-canary-3d_d5e73c0d556c94305a83c95cc0a8798b/node_modules/@dnd-kit/react/sortable.js";
import { pointerIntersection as Ce } from "../../../../../node_modules/.pnpm/@dnd-kit_collision@0.1.21/node_modules/@dnd-kit/collision/dist/index.js";
import { RestrictToElement as Se } from "../../../../../node_modules/.pnpm/@dnd-kit_dom@0.1.21/node_modules/@dnd-kit/dom/modifiers.js";
import { useCmdOrCtrlPressed as Ee } from "../hooks/use-key-pressed.js";
import { CollisionPriority as Me } from "../../../../../node_modules/.pnpm/@dnd-kit_abstract@0.1.21/node_modules/@dnd-kit/abstract/index.js";
import De from "./EditableBrickArrows.js";
import Te from "./EditableBrickContextMenu.js";
import Re from "./EditableBrickNavBar.js";
import { range as ze } from "lodash-es";
import { useDragDropMonitor as Ie } from "../../../../../node_modules/.pnpm/@dnd-kit_react@0.1.21_react-dom@18.3.0-canary-3d9b20132-20240124_react@18.3.0-canary-3d_d5e73c0d556c94305a83c95cc0a8798b/node_modules/@dnd-kit/react/index.js";
import { offset as Fe, autoPlacement as He } from "../../../../../node_modules/.pnpm/@floating-ui_react-dom@2.1.2_react-dom@18.3.0-canary-3d9b20132-20240124_react@18.3.0-ca_b5662bd1feec88595d2ecf6fbf867e98/node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js";
import { autoUpdate as We } from "../../../../../node_modules/.pnpm/@floating-ui_dom@1.6.13/node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
import { Tooltip as Ne } from "../../../../../node_modules/.pnpm/@radix-ui_themes@3.1.4_@types_react-dom@18.3.6_@types_react@18.3.3__@types_react@18.3.3_46b1dabc193c5ff5696ee783983c694e/node_modules/@radix-ui/themes/dist/esm/components/tooltip.js";
function Oe(e) {
  return ["bottom", "top"];
}
function W({
  brick: e,
  index: y,
  level: B = 0,
  isDynamicPreview: n,
  iterationIndex: P
}) {
  const s = z(!1), m = ne(), w = se(), { panelPosition: d } = ae(), a = le(), { getParentBrick: h, updateBrickProps: u } = ke(), v = je(e.id), r = N(e.type), x = h(e.id), [E, O] = I(!1), L = Oe(), V = ce(), A = pe(), C = z(null), f = !!x, M = Ee(), [G, D] = I(!1), K = !!n || A || !r.movable || f || !!e.props.ghost || w === "mobile";
  Ie({
    onBeforeDragStart(o) {
      D(!0);
    },
    onDragEnd(o) {
      setTimeout(() => {
        D(!1);
      }, 200);
    }
  });
  const { isDragging: k, isDropping: Le, isDropTarget: Q, isDragSource: q } = Pe({
    id: e.id,
    index: y,
    element: C,
    disabled: K,
    collisionPriority: Me.Normal,
    collisionDetector: M ? Ce : void 0,
    type: "brick",
    accept: (o) => o.type === "brick" || o.type === "library",
    group: v?.id,
    data: { brick: e, parentBrick: x, section: v, manifest: r },
    transition: {
      duration: 250,
      // Animation duration in ms
      easing: "cubic-bezier(0.25, 1, 0.5, 1)",
      // Animation easing
      idle: !0
      // Whether to animate when no drag is in progress but its index changes
    },
    modifiers: [
      Se.configure({
        element: (o) => f ? C.current?.parentElement : document.querySelector("#page-container")
      })
    ]
  }), {
    refs: b,
    floatingStyles: J,
    update: T,
    context: U
  } = de({
    open: E,
    onOpenChange: O,
    whileElementsMounted: We,
    transform: !0,
    middleware: [
      Fe(r.isContainer ? { mainAxis: 8, crossAxis: 0 } : { mainAxis: 6, crossAxis: 0 }),
      He({
        allowedPlacements: L
      })
    ]
  }), X = me(U, {
    handleClose: ue(),
    enabled: !n,
    delay: {
      open: 50,
      close: 200
    }
  }), { getReferenceProps: $, getFloatingProps: _ } = fe([X]);
  re(() => {
    if (b.reference.current) {
      const o = () => {
        s.current = !0;
      }, g = () => {
        s.current = !1;
      }, j = () => {
        T(), setTimeout(() => {
          s.current = !1;
        }, 200);
      }, i = b.reference.current;
      return i.addEventListener("mousedown", g), i.addEventListener("mouseup", j), i.addEventListener("mousemove", o), () => {
        i.removeEventListener("mousedown", g), i.removeEventListener("mouseup", j), i.removeEventListener("mousemove", o);
      };
    }
  }, [b.reference, T]);
  const Y = F(
    (o) => {
      console.debug("EditableBrickWrapper: Click on brick", o, e);
      const g = o.target, j = o.currentTarget;
      if (s.current || !j?.matches("[data-element-kind='brick']") && !g?.matches("[data-element-kind='brick']") || o.defaultPrevented && !g.closest('[data-prevented-by-editor="true"]')) {
        console.debug(
          "EditableBrickWrapper: Click ignored due to mouse movement or default prevented",
          g,
          o
        );
        return;
      }
      let i = e, R = "brick";
      o.shiftKey ? x && (console.log("Selecting parent brick", x), i = x) : (o.ctrlKey || o.metaKey) && v && (R = "section", i = v), a.hidePanel(), (d === "left" && o.clientX < window.innerWidth * 0.25 || d === "right" && o.clientX > window.innerWidth * 0.75) && a.togglePanelPosition(), ie(() => {
        R === "section" ? a.setSelectedSectionId(i.id) : (console.log("Selecting brick", i), a.setSelectedBrickId(i.id)), a.setPanel("inspector");
      }), s.current = !1, o.stopPropagation();
    },
    [d]
  ), Z = F(
    (o) => {
      console.log("EditableBrickWrapper: Double click on brick"), o.stopPropagation(), u(e.id, { lastTouched: Date.now(), grow: !e.props.grow });
    },
    [e.props]
  ), { ref: ee, isHovered: l } = we({ tolerance: 6, deepCheck: !0 }), te = be({
    brick: e,
    editable: !0,
    selected: m === e.id,
    isContainerChild: f
  }), oe = ge([b.setReference, C, ee]), c = ye(H[e.type]);
  return /* @__PURE__ */ t.jsx(Te, { brick: e, isContainerChild: f, children: /* @__PURE__ */ t.jsxs(
    "div",
    {
      ref: oe,
      ...$(),
      id: e.id,
      "data-element-kind": "brick",
      "data-brick-id": e.id,
      "data-brick-type": e.type,
      "data-last-touched": e.props.lastTouched ?? "0",
      "data-is-container": r.isContainer,
      "data-is-container-child": f,
      "data-dragging": k,
      "data-level": B,
      "data-index": y,
      "data-brick-width": e.props.width,
      "data-brick-height": e.props.height,
      "data-brick-max-width": JSON.stringify(r.maxWidth),
      "data-brick-min-width": JSON.stringify(r.minWidth),
      className: S(
        te,
        n && "hover:(opacity-40 grayscale) group-hover/section:(opacity-40 grayscale pointer-events-none)",
        k ? "!z-[9999] !shadow-2xl overflow-hidden !cursor-grabbing" : "hover:cursor-auto",
        n && G && "scale-0",
        !!e.props.ghost && "opacity-50 pointer-events-none grayscale bg-white"
      ),
      onClick: Y,
      onDoubleClickCapture: Z,
      children: [
        /* @__PURE__ */ t.jsx(
          xe,
          {
            brick: e,
            iterationIndex: P,
            isDynamicPreview: n,
            editable: !0
          }
        ),
        /* @__PURE__ */ t.jsx(he, { children: /* @__PURE__ */ t.jsx(
          Re,
          {
            ref: b.setFloating,
            brick: e,
            isContainerChild: f,
            style: J,
            show: E,
            ..._()
          }
        ) }),
        H[e.type]?.resizable && !V && !k && !n && m === e.id && /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
          (c.canGrowVertical || c.canShrinkVertical) && /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
            /* @__PURE__ */ t.jsx(p, { direction: "s", show: l, manifest: r }),
            /* @__PURE__ */ t.jsx(p, { direction: "n", show: l, manifest: r })
          ] }),
          (c.canGrowHorizontal || c.canShrinkHorizontal) && /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
            /* @__PURE__ */ t.jsx(p, { direction: "w", show: l, manifest: r }),
            /* @__PURE__ */ t.jsx(p, { direction: "e", show: l, manifest: r })
          ] }),
          (c.canGrowVertical && c.canGrowHorizontal || c.canShrinkVertical && c.canShrinkHorizontal) && /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
            /* @__PURE__ */ t.jsx(p, { direction: "se", show: l, manifest: r }),
            /* @__PURE__ */ t.jsx(p, { direction: "sw", show: l, manifest: r }),
            /* @__PURE__ */ t.jsx(p, { direction: "ne", show: l, manifest: r }),
            /* @__PURE__ */ t.jsx(p, { direction: "nw", show: l, manifest: r })
          ] })
        ] }),
        w === "desktop" && !n && e.id === m && /* @__PURE__ */ t.jsx(De, { brick: e }),
        typeof e.props.loop < "u" && !n && /* @__PURE__ */ t.jsx(Ne, { content: "This brick will be repeated for each item in the query result", children: /* @__PURE__ */ t.jsx(
          "div",
          {
            className: S(
              `group-hover/brick:opacity-100 absolute cursor-help -top-[12px] -right-[12px] z-[99999] w-5 h-5 rounded-full
            flex items-center justify-center text-upstart-500 group/dyn-helper bg-white/90 shadow border border-upstart-500`,
              e.id === m ? "opacity-100" : "opacity-0"
            ),
            children: /* @__PURE__ */ t.jsx(Be, { className: "w-3 h-3" })
          }
        ) }),
        r.isContainer && !k && Q && M && !q && /* @__PURE__ */ t.jsx(
          "div",
          {
            className: S(
              "absolute inset-0 z-auto flex items-center justify-center bg-black/30 font-bold text-white rounded"
            ),
            children: /* @__PURE__ */ t.jsx("span", { className: "inline-flex rounded-full px-4 py-2 bg-black/50", children: "Drop in box" })
          }
        )
      ]
    }
  ) });
}
function At(e) {
  const {
    brick: { props: y, type: B }
  } = e, n = ve(), P = N(B), s = y.loop;
  if (!s?.over || P.consumesMultipleQueryRows)
    return /* @__PURE__ */ t.jsx(W, { ...e });
  const m = n.find((h) => h.alias === s?.over), w = Math.min(s.overrideLimit ?? 1 / 0, m?.queryInfo.limit ?? 1, 3), { brick: d, ...a } = e;
  return /* @__PURE__ */ t.jsx(t.Fragment, { children: ze(0, w).map((h, u) => /* @__PURE__ */ t.jsx(
    W,
    {
      ...a,
      iterationIndex: u,
      isDynamicPreview: u > 0,
      brick: {
        ...d,
        id: u > 0 ? `${d.id}-${u}` : d.id
      }
    },
    h
  )) });
}
export {
  W as EditableBrickWrapperSimple,
  At as default
};
//# sourceMappingURL=EditableBrick.js.map
