import { j as jsxRuntimeExports } from "../../../../../_virtual/jsx-runtime.js";
import { a as S } from "../../../../sdk/dist/shared/chunk-GOMXZC4B.js";
import "@sinclair/typebox";
import "../../../../sdk/dist/shared/chunk-PSCN3VVA.js";
import "../../../../sdk/dist/shared/chunk-R6ATC4TC.js";
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 "lodash-es";
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 { useEditorHelpers, useSelectedSectionId } from "../../../../../use-editor.js";
import { HiOutlineCog6Tooth } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.1.1/node_modules/react-icons/hi2/index.js";
import { useState, useCallback } from "react";
import "../../../../../node_modules/.pnpm/@formkit_auto-animate@0.8.2/node_modules/@formkit/auto-animate/index.js";
import "../../../../../node_modules/.pnpm/react-hot-toast@2.5.2_react-dom@19.1.1_react@19.1.1__react@19.1.1/node_modules/react-hot-toast/dist/index.js";
import { TbArrowAutofitHeight, TbBorderCorners, TbCirclePlus, TbDots } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.1.1/node_modules/react-icons/tb/index.js";
import { tx as D } from "../../../../style-system/dist/twind.js";
import { useDraftHelpers, useSections } from "../../../../../use-page-data.js";
import { Tooltip as e } from "../../../../../node_modules/.pnpm/@radix-ui_themes@3.2.1_@types_react-dom@19.1.9_@types_react@19.1.13__@types_react@19.1._832fa1fef691e6e9510ada03948dc85c/node_modules/@radix-ui/themes/dist/esm/components/tooltip.js";
import { Root as I, Trigger as h, Content as g, Group as R, Label as y, Item as v, Separator as B } from "../../../../../node_modules/.pnpm/@radix-ui_themes@3.2.1_@types_react-dom@19.1.9_@types_react@19.1.13__@types_react@19.1._832fa1fef691e6e9510ada03948dc85c/node_modules/@radix-ui/themes/dist/esm/components/dropdown-menu.js";
function EditableSectionButtons({ section }) {
  const [dropdownOpen, setDropdownOpen] = useState(false);
  const draftHelpers = useDraftHelpers();
  const { setSelectedSectionId, setPanel, hidePanel, setSelectedBrickId } = useEditorHelpers();
  const sections = useSections();
  const selectedSectionId = useSelectedSectionId();
  const maxOrder = sections.reduce((max, sec) => Math.max(max, sec.order), -1);
  const minOrder = sections.reduce((min, sec) => Math.min(min, sec.order), Infinity);
  const isLastSection = section.order === maxOrder;
  const isFirstSection = section.order === minOrder;
  const isSpecialSection = typeof section.props.variant !== "undefined";
  const resizable = section.props.variant !== "navbar" && section.props.variant !== "footer";
  const onSettingsBtnClick = useCallback(
    (e2) => {
      e2.stopPropagation();
      if (selectedSectionId !== section.id) {
        setSelectedSectionId(section.id);
        setPanel("inspector");
      } else {
        hidePanel();
        setSelectedSectionId();
      }
    },
    [selectedSectionId]
  );
  const btnCls = D(
    "select-none hover:opacity-90",
    "text-base px-1.5 h-7  ",
    "text-black/80 hover:bg-upstart-300/20 font-bold flex items-center gap-1",
    "active:(outline-none ring-0) focus:(outline-none ring-0)"
  );
  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
    "div",
    {
      role: "toolbar",
      className: D(
        "font-sans",
        // bottom-[3px]
        isLastSection ? "bottom-3" : "bottom-0",
        dropdownOpen ? "opacity-100" : "opacity-0",
        `section-options-buttons translate-y-1/2 shadow
            absolute z-[99999] left-1/2 -translate-x-1/2 min-w-fit border border-gray-200`,
        "gap-0 rounded-md [&>*:first-child]:rounded-l-md [&>*:last-child]:rounded-r-md ",
        "bg-white/90 backdrop-blur-md transition-opacity duration-500 group-hover/section:opacity-100 flex"
      ),
      children: [
        /* @__PURE__ */ jsxRuntimeExports.jsxs(
          "div",
          {
            className: D(btnCls, "inline-flex flex-nowrap items-center gap-1 !px-2.5 pointer-events-none"),
            "data-trigger-section-inspector": true,
            children: [
              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs font-light text-nowrap", children: "Section" }),
              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs font-semibold text-nowrap max-w-[120px] truncate", children: section.label ?? "Unnamed" })
            ]
          }
        ),
        /* @__PURE__ */ jsxRuntimeExports.jsx(
          "button",
          {
            type: "button",
            id: `${section.id}-resize-handle`,
            className: D(btnCls),
            onClick: onSettingsBtnClick,
            children: /* @__PURE__ */ jsxRuntimeExports.jsx(HiOutlineCog6Tooth, { className: "w-5 h-5" })
          }
        ),
        resizable && /* @__PURE__ */ jsxRuntimeExports.jsx(
          "button",
          {
            type: "button",
            id: `${section.id}-resize-handle`,
            className: D("!cursor-ns-resize", btnCls, "section-resizable-handle"),
            children: /* @__PURE__ */ jsxRuntimeExports.jsx(TbArrowAutofitHeight, { className: "w-5 h-5" })
          }
        ),
        resizable && section.props.minHeight !== "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(e, { content: "Fill entire screen height", delayDuration: 400, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
          "button",
          {
            type: "button",
            onClick: () => {
              draftHelpers.updateSectionProps(section.id, {
                minHeight: "full"
              });
              const el = document.getElementById(section.id);
              if (el) {
                el.style.removeProperty("minHeight");
                el.style.removeProperty("maxHeight");
                el.style.removeProperty("height");
              }
              setTimeout(() => {
                window.scrollTo(0, document.body.scrollHeight);
                document.getElementById(section.id)?.scrollIntoView({ behavior: "smooth" });
              }, 100);
            },
            className: D(btnCls, "cursor-pointer"),
            children: /* @__PURE__ */ jsxRuntimeExports.jsx(TbBorderCorners, { className: "w-5 h-5" })
          }
        ) }),
        /* @__PURE__ */ jsxRuntimeExports.jsx(e, { content: "Create new section below", delayDuration: 400, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
          "button",
          {
            type: "button",
            onClick: (e2) => {
              e2.stopPropagation();
              const newId = `s_${S()}`;
              draftHelpers.createEmptySection(newId, section.id);
              setSelectedSectionId(newId);
              setPanel("inspector");
            },
            className: D(btnCls, "cursor-pointer"),
            children: /* @__PURE__ */ jsxRuntimeExports.jsx(TbCirclePlus, { className: "w-5 h-5" })
          }
        ) }),
        /* @__PURE__ */ jsxRuntimeExports.jsxs(I, { modal: false, onOpenChange: setDropdownOpen, children: [
          /* @__PURE__ */ jsxRuntimeExports.jsx(
            h,
            {
              onClick: (e2) => {
                e2.stopPropagation();
              },
              children: /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: D(btnCls), children: /* @__PURE__ */ jsxRuntimeExports.jsx(TbDots, { className: "w-5 h-5" }) })
            }
          ),
          /* @__PURE__ */ jsxRuntimeExports.jsxs(g, { sideOffset: 5, size: "2", side: "bottom", align: "end", children: [
            /* @__PURE__ */ jsxRuntimeExports.jsxs(R, { children: [
              /* @__PURE__ */ jsxRuntimeExports.jsxs(y, { children: [
                section.label ?? "Unnamed",
                " (section)"
              ] }),
              !isFirstSection && /* @__PURE__ */ jsxRuntimeExports.jsx(v, { onClick: () => draftHelpers.moveSectionUp(section.id), children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-start gap-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Reorder up" }) }) }),
              !isLastSection && /* @__PURE__ */ jsxRuntimeExports.jsx(v, { onClick: () => draftHelpers.moveSectionDown(section.id), children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-start gap-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Reorder down" }) }) })
            ] }),
            /* @__PURE__ */ jsxRuntimeExports.jsx(B, {}),
            /* @__PURE__ */ jsxRuntimeExports.jsxs(R, { children: [
              /* @__PURE__ */ jsxRuntimeExports.jsx(
                v,
                {
                  onClick: (e2) => {
                    e2.stopPropagation();
                    const newId = `s_${S()}`;
                    draftHelpers.createEmptySection(newId, section.id);
                    setSelectedSectionId(newId);
                    setPanel("inspector");
                  },
                  children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-start gap-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Create new section below" }) })
                }
              ),
              isSpecialSection === false && /* @__PURE__ */ jsxRuntimeExports.jsx(
                v,
                {
                  onClick: (e2) => {
                    e2.stopPropagation();
                    draftHelpers.duplicateSection(section.id);
                  },
                  children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-start gap-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Duplicate" }) })
                }
              )
            ] }),
            /* @__PURE__ */ jsxRuntimeExports.jsx(B, {}),
            /* @__PURE__ */ jsxRuntimeExports.jsx(
              v,
              {
                color: "red",
                onClick: (e2) => {
                  e2.stopPropagation();
                  draftHelpers.deleteSection(section.id);
                  setSelectedSectionId();
                  setSelectedBrickId();
                  setPanel();
                },
                children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-start gap-2.5", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Delete section" }) })
              }
            )
          ] })
        ] })
      ]
    }
  );
}
export {
  EditableSectionButtons as default
};
//# sourceMappingURL=EditableSectionButtons.js.map
