import { j as o } from "../../../../../_virtual/jsx-runtime.js";
import { useEditorHelpers as E, usePreviewMode as v, useSelectedSectionId as j, useEditingTextForBrickId as w, useDraggingBrickType as C } from "../../../../../use-editor.js";
import I from "./EditableBrick.js";
import { useSectionStyle as B } from "../../shared/hooks/use-section-style.js";
import { useCallback as T } from "react";
import { a as W } from "../../../../sdk/dist/shared/chunk-RDZK73KV.js";
import { a as N } 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 { tx as P } from "../../../../style-system/dist/twind.js";
import { useDeepCompareEffect as O } from "../../../../../node_modules/.pnpm/use-deep-compare@1.3.0_react@18.3.0-canary-3d9b20132-20240124/node_modules/use-deep-compare/dist-web/index.js";
import { useDeviceInfo as $ } from "../hooks/use-device-info.js";
import { useDraftHelpers as H, useSection as M } from "../../../../../use-page-data.js";
import { useDroppable as R } 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 { CollisionPriority as F } from "../../../../../node_modules/.pnpm/@dnd-kit_abstract@0.1.21/node_modules/@dnd-kit/abstract/index.js";
import { pointerDistance as z } from "../../../../../node_modules/.pnpm/@dnd-kit_collision@0.1.21/node_modules/@dnd-kit/collision/dist/index.js";
import q from "./EditableSectionContextMenu.js";
import A from "./EditableSectionButtons.js";
import { useResizableSection as G } from "../hooks/use-resizable-section.js";
function Pt({ section: e, index: J }) {
  const { bricks: s, id: p } = e, { setSelectedSectionId: l, setPanel: c, setSelectedBrickId: a, setIsEditingText: f } = E(), u = H(), n = v(), g = j(), b = w(), r = C(), { isDesktop: h } = $(), d = typeof e.props.variant < "u", y = d || /* Not DnD on mobile */
  n === "mobile" || /* No DnD on small screens */
  !h || /* No DnD when dragging a brick that has inline drag disabled */
  !!r && N[r]?.inlineDragDisabled, S = M(e.id), { isDropTarget: m, ref: x } = R({
    id: p,
    type: "section",
    accept: (t) => t.type === "brick" || t.type === "library",
    collisionPriority: F.Normal,
    collisionDetector: z,
    data: { section: e },
    disabled: y
  }), k = B({
    section: e,
    editable: !0,
    selected: g === e.id,
    previewMode: n,
    isDropTarget: m
  });
  G(e), O(() => {
    const t = document.getElementById(e.id);
    W(t, `Section element with id ${e.id} not found`), t.scrollWidth > t.clientWidth + parseFloat(e.props.gap ?? "0") * 2 && console.warn(
      `Section ${e.id} is overflowing. Consider adjusting its width or content. sectionEl.scrollWidth = %s, sectionEl.clientWidth = %s`,
      t.scrollWidth,
      t.clientWidth
    );
  }, [S]);
  const D = T(
    (t) => {
      const i = t.target;
      if (!i.closest("[data-trigger-section-inspector]") && (t.defaultPrevented || i.nodeName !== "SECTION" || r)) {
        console.debug("Click prevented on section", i);
        return;
      }
      l(e.id), a(), f(!1), c("inspector");
    },
    [r, e.id]
  );
  return /* @__PURE__ */ o.jsx(q, { section: e, children: /* @__PURE__ */ o.jsxs("section", { id: p, ref: x, "data-element-kind": "section", onClick: D, className: k, children: [
    !b && !r && !d && /* @__PURE__ */ o.jsx(A, { section: e }),
    s.filter((t) => !t.props.hidden?.[n]).map((t, i) => /* @__PURE__ */ o.jsx(
      I,
      {
        brick: t,
        index: i,
        iterationIndex: i
      },
      `${n}-${t.id}`
    )),
    s.length === 0 && /* @__PURE__ */ o.jsxs(
      "div",
      {
        "data-trigger-section-inspector": !0,
        className: P(
          "w-full min-w-full self-stretch py-2 h-auto flex-1 text-center rounded",
          "flex justify-center items-center font-normal",
          m && "bg-upstart-50",
          "opacity-0 hover:opacity-80 transition-opacity duration-300"
        ),
        children: [
          "This section is empty. Drag bricks here to stack them inside, ",
          /* @__PURE__ */ o.jsx(
            "button",
            {
              type: "button",
              onClick: (t) => {
                t.stopPropagation(), u.deleteSection(e.id), l(), c();
              },
              className: "inline-block underline underline-offset-2",
              children: "delete it"
            }
          ),
          ", or leave it empty."
        ]
      }
    )
  ] }) });
}
export {
  Pt as default
};
//# sourceMappingURL=EditableSection.js.map
