import { j as jsxRuntimeExports } from "../../../../../_virtual/jsx-runtime.js";
import { useEditorHelpers, usePreviewMode, useSelectedSectionId, useEditingTextForBrickId, useDraggingBrickType } from "../../../../../use-editor.js";
import EditableBrickWrapper from "./EditableBrick.js";
import { useSectionStyle } from "../../shared/hooks/use-section-style.js";
import { useCallback } from "react";
import { a as e } from "../../../../sdk/dist/shared/chunk-RDZK73KV.js";
import { a as fe } 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 D } from "../../../../style-system/dist/twind.js";
import { useDeepCompareEffect } from "../../../../../node_modules/.pnpm/use-deep-compare@1.3.0_react@19.1.1/node_modules/use-deep-compare/dist-web/index.js";
import { useDeviceInfo } from "../hooks/use-device-info.js";
import { useDraftHelpers, useSection } from "../../../../../use-page-data.js";
import { useDroppable } from "../../../../../node_modules/.pnpm/@dnd-kit_react@0.1.21_react-dom@19.1.1_react@19.1.1__react@19.1.1/node_modules/@dnd-kit/react/index.js";
import { CollisionPriority } from "../../../../../node_modules/.pnpm/@dnd-kit_abstract@0.1.21/node_modules/@dnd-kit/abstract/index.js";
import { pointerDistance } from "../../../../../node_modules/.pnpm/@dnd-kit_collision@0.1.21/node_modules/@dnd-kit/collision/dist/index.js";
import EditableSectionContextMenu from "./EditableSectionContextMenu.js";
import EditableSectionButtons from "./EditableSectionButtons.js";
import { useResizableSection } from "../hooks/use-resizable-section.js";
function EditableSection({ section, index }) {
  const { bricks, id } = section;
  const { setSelectedSectionId, setPanel, setSelectedBrickId, setIsEditingText } = useEditorHelpers();
  const draftHelpers = useDraftHelpers();
  const previewMode = usePreviewMode();
  const selectedSectionId = useSelectedSectionId();
  const editingBrick = useEditingTextForBrickId();
  const draggingBrickType = useDraggingBrickType();
  const { isDesktop } = useDeviceInfo();
  const isSpecialSection = typeof section.props.variant !== "undefined";
  const dropDisabled = isSpecialSection || /* Not DnD on mobile */
  previewMode === "mobile" || /* No DnD on small screens */
  !isDesktop || /* No DnD when dragging a brick that has inline drag disabled */
  !!draggingBrickType && fe[draggingBrickType]?.inlineDragDisabled;
  const sectionObj = useSection(section.id);
  const { isDropTarget, ref: sectionRef } = useDroppable({
    id,
    type: "section",
    accept: (source) => source.type === "brick" || source.type === "library",
    collisionPriority: CollisionPriority.Normal,
    collisionDetector: pointerDistance,
    data: { section },
    disabled: dropDisabled
  });
  const className = useSectionStyle({
    section,
    editable: true,
    selected: selectedSectionId === section.id,
    previewMode,
    isDropTarget
  });
  useResizableSection(section);
  useDeepCompareEffect(() => {
    const sectionEl = document.getElementById(section.id);
    e(sectionEl, `Section element with id ${section.id} not found`);
    const isOverflowing = () => sectionEl.scrollWidth > sectionEl.clientWidth + parseFloat(section.props.gap ?? "0") * 2;
    if (isOverflowing()) {
      console.warn(
        `Section ${section.id} is overflowing. Consider adjusting its width or content. sectionEl.scrollWidth = %s, sectionEl.clientWidth = %s`,
        sectionEl.scrollWidth,
        sectionEl.clientWidth
      );
    }
  }, [sectionObj]);
  const onClick = useCallback(
    (e2) => {
      const target = e2.target;
      if (!target.closest("[data-trigger-section-inspector]") && (e2.defaultPrevented || target.nodeName !== "SECTION" || draggingBrickType)) {
        console.debug("Click prevented on section", target);
        return;
      }
      setSelectedSectionId(section.id);
      setSelectedBrickId();
      setIsEditingText(false);
      setPanel("inspector");
    },
    [draggingBrickType, section.id]
  );
  return /* @__PURE__ */ jsxRuntimeExports.jsx(EditableSectionContextMenu, { section, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { id, ref: sectionRef, "data-element-kind": "section", onClick, className, children: [
    !editingBrick && !draggingBrickType && !isSpecialSection && /* @__PURE__ */ jsxRuntimeExports.jsx(EditableSectionButtons, { section }),
    bricks.filter((b) => !b.props.hidden?.[previewMode]).map((brick, brickIndex) => {
      return /* @__PURE__ */ jsxRuntimeExports.jsx(
        EditableBrickWrapper,
        {
          brick,
          index: brickIndex,
          iterationIndex: brickIndex
        },
        `${previewMode}-${brick.id}`
      );
    }),
    bricks.length === 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(
      "div",
      {
        "data-trigger-section-inspector": true,
        className: D(
          "w-full min-w-full self-stretch py-2 h-auto flex-1 text-center rounded",
          "flex justify-center items-center font-normal",
          isDropTarget && "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__ */ jsxRuntimeExports.jsx(
            "button",
            {
              type: "button",
              onClick: (e2) => {
                e2.stopPropagation();
                draftHelpers.deleteSection(section.id);
                setSelectedSectionId();
                setPanel();
              },
              className: "inline-block underline underline-offset-2",
              children: "delete it"
            }
          ),
          ", or leave it empty."
        ]
      }
    )
  ] }) });
}
export {
  EditableSection as default
};
//# sourceMappingURL=EditableSection.js.map
