import { j as o } from "../../../../../_virtual/jsx-runtime.js";
import { useEditorHelpers as E, usePreviewMode as D, useSelectedSectionId as v, useEditingTextForBrickId as j, useDraggingBrickType as w } from "../../../../../use-editor.js";
import C from "./EditableBrick.js";
import { useSectionStyle as I } from "../../shared/hooks/use-section-style.js";
import { useCallback as B } from "react";
import T from "../../../../sdk/dist/shared/utils/invariant.js";
import { a as W } 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 { tx as N } from "../../../../style-system/dist/twind.js";
import { useDeepCompareEffect as P } 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 O } from "../hooks/use-device-info.js";
import { useDraftHelpers as $, useSection as H } from "../../../../../use-page-data.js";
import { useDroppable as M } 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 R } from "../../../../../node_modules/.pnpm/@dnd-kit_abstract@0.1.21/node_modules/@dnd-kit/abstract/index.js";
import { pointerDistance as F } from "../../../../../node_modules/.pnpm/@dnd-kit_collision@0.1.21/node_modules/@dnd-kit/collision/dist/index.js";
import z from "./EditableSectionContextMenu.js";
import _ from "./EditableSectionButtons.js";
import { useResizableSection as q } from "../hooks/use-resizable-section.js";
function Ot({ section: e, index: A }) {
  const { bricks: s, id: p } = e, { setSelectedSectionId: l, setPanel: c, setSelectedBrickId: m, setIsEditingText: a } = E(), f = $(), n = D(), u = v(), g = j(), r = w(), { isDesktop: S } = O(), b = typeof e.props.variant < "u" || /* Not DnD on mobile */
  n === "mobile" || /* No DnD on small screens */
  !S || /* No DnD when dragging a brick that has inline drag disabled */
  !!r && W[r]?.inlineDragDisabled, h = H(e.id), { isDropTarget: d, ref: y } = M({
    id: p,
    type: "section",
    accept: (t) => t.type === "brick" || t.type === "library",
    collisionPriority: R.Normal,
    collisionDetector: F,
    data: { section: e },
    disabled: b
  }), x = I({
    section: e,
    editable: !0,
    selected: u === e.id,
    previewMode: n,
    isDropTarget: d
  });
  q(e), P(() => {
    const t = document.getElementById(e.id);
    T(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
    );
  }, [h]);
  const k = B(
    (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), m(), a(!1), c("inspector");
    },
    [r, e.id]
  );
  return /* @__PURE__ */ o.jsx(z, { section: e, children: /* @__PURE__ */ o.jsxs("section", { id: p, ref: y, "data-element-kind": "section", onClick: k, className: x, children: [
    !g && !r && /* @__PURE__ */ o.jsx(_, { section: e }),
    s.filter((t) => !t.props.hidden?.[n]).map((t, i) => /* @__PURE__ */ o.jsx(
      C,
      {
        brick: t,
        index: i,
        iterationIndex: i
      },
      `${n}-${t.id}`
    )),
    s.length === 0 && /* @__PURE__ */ o.jsxs(
      "div",
      {
        "data-trigger-section-inspector": !0,
        className: N(
          "w-full min-w-full self-stretch py-2 h-auto flex-1 text-center rounded",
          "flex justify-center items-center font-normal",
          d && "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(), f.deleteSection(e.id), l(), c();
              },
              className: "inline-block underline underline-offset-2",
              children: "delete it"
            }
          ),
          ", or leave it empty."
        ]
      }
    )
  ] }) });
}
export {
  Ot as default
};
//# sourceMappingURL=EditableSection.js.map
