import { j as t } from "../../../../../_virtual/jsx-runtime.js";
import { useRef as D, useState as I, useEffect as ee, useCallback as te, startTransition as re } from "react";
import { useSelectedBrickId as oe, usePreviewMode as ie, usePanel as ne, useEditorHelpers as se, useDraggingBrickType as ae } from "../../../../../use-editor.js";
import "../../../../../node_modules/.pnpm/@formkit_auto-animate@0.8.2/node_modules/@formkit/auto-animate/index.js";
import { useFloating as le, useHover as ce, safePolygon as de, useInteractions as pe, useMergeRefs as me, FloatingPortal as ue } 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 fe from "../../shared/components/BrickComponent.js";
import { useBrickWrapperStyle as ge } from "../../shared/hooks/use-brick-style.js";
import { useBrickManifest as N } from "../../shared/hooks/use-brick-manifest.js";
import { tx as C } from "../../../../style-system/dist/twind.js";
import d from "./ResizeHandle.js";
import { a as F } from "../../../../sdk/dist/shared/chunk-PSCN3VVA.js";
import "../../../../sdk/dist/shared/chunk-R6ATC4TC.js";
import "@sinclair/typebox";
import "../../../../sdk/dist/shared/chunk-CFF6Q7O7.js";
import "../../../../sdk/dist/shared/chunk-IKC3FK7L.js";
import "../../../../sdk/dist/shared/chunk-E6XEI7IK.js";
import "../../../../sdk/dist/shared/chunk-SQ5T4AT5.js";
import "../../../../sdk/dist/shared/chunk-G5CJU6RD.js";
import "../../../../sdk/dist/shared/chunk-PSTFJ5IJ.js";
import "../../../../sdk/dist/shared/chunk-NJGXC7D6.js";
import "../../../../sdk/dist/shared/chunk-SXHDQ64Z.js";
import "../../../../sdk/dist/shared/chunk-QX6OGRRT.js";
import "../../../../sdk/dist/shared/chunk-FLOMNC6J.js";
import "../../../../sdk/dist/shared/chunk-PLSV746R.js";
import "../../../../sdk/dist/shared/chunk-WBZW5LVH.js";
import "../../../../sdk/dist/shared/chunk-WYVJE6J5.js";
import "../../../../sdk/dist/shared/chunk-I3VL6SRH.js";
import "../../../../sdk/dist/shared/chunk-B3EATRFX.js";
import "../../../../sdk/dist/shared/chunk-IKHZD2JH.js";
import "../../../../sdk/dist/shared/chunk-PXI7AHWS.js";
import "../../../../sdk/dist/shared/chunk-SY6DZLTC.js";
import "../../../../sdk/dist/shared/chunk-7A2JNQX3.js";
import "../../../../sdk/dist/shared/chunk-3YVJ2ELD.js";
import "../../../../sdk/dist/shared/chunk-AFVJZPLS.js";
import "../../../../sdk/dist/shared/chunk-A3GF4PYW.js";
import "../../../../sdk/dist/shared/chunk-W33JMRRN.js";
import { getBrickResizeOptions as he } from "../../shared/utils/layout-utils.js";
import xe from "../hooks/use-is-hovered.js";
import { usePageQueries as ye, useDraftHelpers as be, useSectionByBrickId as we } from "../../../../../use-page-data.js";
import { MdRepeat as ve } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@18.3.0-canary-3d9b20132-20240124/node_modules/react-icons/md/index.js";
import { useSortable as ke } 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 je } from "../../../../../node_modules/.pnpm/@dnd-kit_collision@0.1.21/node_modules/@dnd-kit/collision/dist/index.js";
import { RestrictToElement as Be } from "../../../../../node_modules/.pnpm/@dnd-kit_dom@0.1.21/node_modules/@dnd-kit/dom/modifiers.js";
import { useCmdOrCtrlPressed as Se } from "../hooks/use-key-pressed.js";
import { CollisionPriority as Pe } from "../../../../../node_modules/.pnpm/@dnd-kit_abstract@0.1.21/node_modules/@dnd-kit/abstract/index.js";
import Ce from "./EditableBrickArrows.js";
import Ee from "./EditableBrickContextMenu.js";
import Me from "./EditableBrickNavBar.js";
import { range as Te } from "lodash-es";
import { useDragDropMonitor as Re } 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 ze, autoPlacement as De } 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 Ie } from "../../../../../node_modules/.pnpm/@floating-ui_dom@1.6.13/node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
import { Tooltip as Fe } 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 He(e) {
  return ["bottom", "top"];
}
function H({
  brick: e,
  index: b,
  level: B = 0,
  isDynamicPreview: s,
  iterationIndex: S
}) {
  const a = D(!1), m = oe(), w = ie(), { panelPosition: p } = ne(), i = se(), { getParentBrick: g, updateBrickProps: h } = be(), v = we(e.id), o = N(e.type), x = g(e.id), [E, W] = I(!1), A = He(), G = ae(), P = D(null), u = !!x, M = Se(), [L, T] = I(!1), O = !!s || !o.movable || u || !!e.props.ghost || w === "mobile";
  Re({
    onBeforeDragStart(r) {
      T(!0);
    },
    onDragEnd(r) {
      setTimeout(() => {
        T(!1);
      }, 200);
    }
  });
  const { isDragging: k, isDropping: Ne, isDropTarget: V, isDragSource: K } = ke({
    id: e.id,
    index: b,
    element: P,
    disabled: O,
    collisionPriority: Pe.Normal,
    collisionDetector: M ? je : void 0,
    type: "brick",
    accept: (r) => r.type === "brick" || r.type === "library",
    group: v?.id,
    data: { brick: e, parentBrick: x, section: v, manifest: o },
    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: [
      Be.configure({
        element: (r) => u ? P.current?.parentElement : document.querySelector("#page-container")
      })
    ]
  }), {
    refs: y,
    floatingStyles: Q,
    update: R,
    context: q
  } = le({
    open: E,
    onOpenChange: W,
    whileElementsMounted: Ie,
    transform: !0,
    middleware: [
      ze(o.isContainer ? { mainAxis: 8, crossAxis: 0 } : { mainAxis: 6, crossAxis: 0 }),
      De({
        allowedPlacements: A
      })
    ]
  }), J = ce(q, {
    handleClose: de(),
    enabled: !s,
    delay: {
      open: 50,
      close: 200
    }
  }), { getReferenceProps: U, getFloatingProps: X } = pe([J]);
  ee(() => {
    if (y.reference.current) {
      const r = () => {
        a.current = !0;
      }, f = () => {
        a.current = !1;
      }, j = () => {
        R(), setTimeout(() => {
          a.current = !1;
        }, 200);
      }, n = y.reference.current;
      return n.addEventListener("mousedown", f), n.addEventListener("mouseup", j), n.addEventListener("mousemove", r), () => {
        n.removeEventListener("mousedown", f), n.removeEventListener("mouseup", j), n.removeEventListener("mousemove", r);
      };
    }
  }, [y.reference, R]);
  const $ = te(
    (r) => {
      const f = r.target, j = r.currentTarget;
      if (a.current || !j?.matches("[data-element-kind='brick']") && !f?.matches("[data-element-kind='brick']") || r.defaultPrevented && !f.closest('[data-prevented-by-editor="true"]')) {
        console.debug(
          "EditableBrickWrapper: Click ignored due to mouse movement or default prevented",
          f,
          r
        );
        return;
      }
      if (o.isGlobalBrick) {
        i.setPanel("settings"), i.setAttributesGroup(o.type), i.setAttributesTab("site"), i.setSelectedBrickId(e.id);
        return;
      }
      let n = e, z = "brick";
      r.shiftKey ? x && (console.log("Selecting parent brick", x), n = x) : (r.ctrlKey || r.metaKey) && v && (z = "section", n = v), i.hidePanel(), (p === "left" && r.clientX < window.innerWidth * 0.25 || p === "right" && r.clientX > window.innerWidth * 0.75) && i.togglePanelPosition(), re(() => {
        z === "section" ? i.setSelectedSectionId(n.id) : (console.log("Selecting brick", n), i.setSelectedBrickId(n.id)), i.setPanel("inspector");
      }), a.current = !1, r.stopPropagation();
    },
    [p]
  ), { ref: Y, isHovered: l } = xe({ tolerance: 6, deepCheck: !0 }), Z = ge({
    brick: e,
    editable: !0,
    selected: m === e.id,
    isContainerChild: u
  }), _ = me([y.setReference, P, Y]), c = he(F[e.type]);
  return /* @__PURE__ */ t.jsx(Ee, { brick: e, isContainerChild: u, children: /* @__PURE__ */ t.jsxs(
    "div",
    {
      ref: _,
      ...U(),
      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": o.isContainer,
      "data-is-container-child": u,
      "data-dragging": k,
      "data-level": B,
      "data-index": b,
      "data-brick-width": e.props.width,
      "data-brick-height": e.props.height,
      "data-brick-max-width": JSON.stringify(o.maxWidth),
      "data-brick-min-width": JSON.stringify(o.minWidth),
      className: C(
        Z,
        s && "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",
        s && L && "scale-0",
        !!e.props.ghost && "opacity-50 pointer-events-none grayscale bg-white"
      ),
      onClick: $,
      children: [
        /* @__PURE__ */ t.jsx(
          fe,
          {
            brick: e,
            iterationIndex: S,
            isDynamicPreview: s,
            editable: !0
          }
        ),
        /* @__PURE__ */ t.jsx(ue, { children: /* @__PURE__ */ t.jsx(
          Me,
          {
            ref: y.setFloating,
            brick: e,
            isContainerChild: u,
            style: Q,
            show: E,
            ...X()
          }
        ) }),
        F[e.type]?.resizable && !G && !k && !s && m === e.id && /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
          (c.canGrowVertical || c.canShrinkVertical) && /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
            /* @__PURE__ */ t.jsx(d, { direction: "s", show: l, manifest: o }),
            /* @__PURE__ */ t.jsx(d, { direction: "n", show: l, manifest: o })
          ] }),
          (c.canGrowHorizontal || c.canShrinkHorizontal) && /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
            /* @__PURE__ */ t.jsx(d, { direction: "w", show: l, manifest: o }),
            /* @__PURE__ */ t.jsx(d, { direction: "e", show: l, manifest: o })
          ] }),
          (c.canGrowVertical && c.canGrowHorizontal || c.canShrinkVertical && c.canShrinkHorizontal) && /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
            /* @__PURE__ */ t.jsx(d, { direction: "se", show: l, manifest: o }),
            /* @__PURE__ */ t.jsx(d, { direction: "sw", show: l, manifest: o }),
            /* @__PURE__ */ t.jsx(d, { direction: "ne", show: l, manifest: o }),
            /* @__PURE__ */ t.jsx(d, { direction: "nw", show: l, manifest: o })
          ] })
        ] }),
        w === "desktop" && !s && e.id === m && /* @__PURE__ */ t.jsx(Ce, { brick: e }),
        typeof e.props.loop < "u" && !s && /* @__PURE__ */ t.jsx(Fe, { content: "This brick will be repeated for each item in the query result", children: /* @__PURE__ */ t.jsx(
          "div",
          {
            className: C(
              `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(ve, { className: "w-3 h-3" })
          }
        ) }),
        o.isContainer && !k && V && M && !K && /* @__PURE__ */ t.jsx(
          "div",
          {
            className: C(
              "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 Wt(e) {
  const {
    brick: { props: b, type: B }
  } = e, s = ye(), S = N(B), a = b.loop;
  if (!a?.over || S.consumesMultipleQueryRows)
    return /* @__PURE__ */ t.jsx(H, { ...e });
  const m = s.find((g) => g.alias === a?.over), w = Math.min(a.overrideLimit ?? 1 / 0, m?.queryInfo.limit ?? 1, 3), { brick: p, ...i } = e;
  return /* @__PURE__ */ t.jsx(t.Fragment, { children: Te(0, w).map((g, h) => /* @__PURE__ */ t.jsx(
    H,
    {
      ...i,
      iterationIndex: h,
      isDynamicPreview: h > 0,
      brick: {
        ...p,
        id: h > 0 ? `${p.id}-${h}` : p.id
      }
    },
    g
  )) });
}
export {
  H as EditableBrickWrapperSimple,
  Wt as default
};
//# sourceMappingURL=EditableBrick.js.map
