import { j as e } from "../../../../../_virtual/jsx-runtime.js";
import { a as h } 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 as P, useSelectedSectionId as I } from "../../../../../use-editor.js";
import { HiOutlineCog6Tooth as H } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@18.3.0-canary-3d9b20132-20240124/node_modules/react-icons/hi2/index.js";
import { useState as D, useCallback as T } 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@18.3.0-canary-3d9b20132-20240124_react@18.3.0-canary-3d_c02c1e17bf76c343fd22d1f22394ecf5/node_modules/react-hot-toast/dist/index.js";
import { TbArrowAutofitHeight as z, TbBorderCorners as B, TbCirclePlus as E, TbDots as O } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@18.3.0-canary-3d9b20132-20240124/node_modules/react-icons/tb/index.js";
import { tx as i } from "../../../../style-system/dist/twind.js";
import { useDraftHelpers as R, useSections as $ } from "../../../../../use-page-data.js";
import { Tooltip as u } 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";
import { Root as U, Trigger as A, Content as F, Group as f, Label as L, Item as l, Separator as j } 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/dropdown-menu.js";
function Pe({ section: t }) {
  const [b, g] = D(!1), s = R(), { setSelectedSectionId: a, setPanel: c, hidePanel: y, setSelectedBrickId: w } = P(), d = $(), p = I(), v = d.reduce((o, r) => Math.max(o, r.order), -1), S = d.reduce((o, r) => Math.min(o, r.order), 1 / 0), m = t.order === v, C = t.order === S, N = typeof t.props.variant < "u", x = t.props.variant !== "navbar" && t.props.variant !== "footer", k = T(
    (o) => {
      o.stopPropagation(), p !== t.id ? (a(t.id), c("inspector")) : (y(), a());
    },
    [p]
  ), n = i(
    "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__ */ e.jsxs(
    "div",
    {
      role: "toolbar",
      className: i(
        "font-sans",
        // bottom-[3px]
        m ? "bottom-3" : "bottom-0",
        b ? "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__ */ e.jsxs(
          "div",
          {
            className: i(n, "inline-flex flex-nowrap items-center gap-1 !px-2.5 pointer-events-none"),
            "data-trigger-section-inspector": !0,
            children: [
              /* @__PURE__ */ e.jsx("div", { className: "text-xs font-light text-nowrap", children: "Section" }),
              /* @__PURE__ */ e.jsx("div", { className: "text-xs font-semibold text-nowrap max-w-[120px] truncate", children: t.label ?? "Unnamed" })
            ]
          }
        ),
        /* @__PURE__ */ e.jsx(
          "button",
          {
            type: "button",
            id: `${t.id}-resize-handle`,
            className: i(n),
            onClick: k,
            children: /* @__PURE__ */ e.jsx(H, { className: "w-5 h-5" })
          }
        ),
        x && /* @__PURE__ */ e.jsx(
          "button",
          {
            type: "button",
            id: `${t.id}-resize-handle`,
            className: i("!cursor-ns-resize", n, "section-resizable-handle"),
            children: /* @__PURE__ */ e.jsx(z, { className: "w-5 h-5" })
          }
        ),
        x && t.props.minHeight !== "full" && /* @__PURE__ */ e.jsx(u, { content: "Fill entire screen height", delayDuration: 400, children: /* @__PURE__ */ e.jsx(
          "button",
          {
            type: "button",
            onClick: () => {
              s.updateSectionProps(t.id, {
                minHeight: "full"
              });
              const o = document.getElementById(t.id);
              o && (o.style.removeProperty("minHeight"), o.style.removeProperty("maxHeight"), o.style.removeProperty("height")), setTimeout(() => {
                window.scrollTo(0, document.body.scrollHeight), document.getElementById(t.id)?.scrollIntoView({ behavior: "smooth" });
              }, 100);
            },
            className: i(n, "cursor-pointer"),
            children: /* @__PURE__ */ e.jsx(B, { className: "w-5 h-5" })
          }
        ) }),
        /* @__PURE__ */ e.jsx(u, { content: "Create new section below", delayDuration: 400, children: /* @__PURE__ */ e.jsx(
          "button",
          {
            type: "button",
            onClick: (o) => {
              o.stopPropagation();
              const r = `s_${h()}`;
              s.createEmptySection(r, t.id), a(r), c("inspector");
            },
            className: i(n, "cursor-pointer"),
            children: /* @__PURE__ */ e.jsx(E, { className: "w-5 h-5" })
          }
        ) }),
        /* @__PURE__ */ e.jsxs(U, { modal: !1, onOpenChange: g, children: [
          /* @__PURE__ */ e.jsx(
            A,
            {
              onClick: (o) => {
                o.stopPropagation();
              },
              children: /* @__PURE__ */ e.jsx("button", { type: "button", className: i(n), children: /* @__PURE__ */ e.jsx(O, { className: "w-5 h-5" }) })
            }
          ),
          /* @__PURE__ */ e.jsxs(F, { sideOffset: 5, size: "2", side: "bottom", align: "end", children: [
            /* @__PURE__ */ e.jsxs(f, { children: [
              /* @__PURE__ */ e.jsxs(L, { children: [
                t.label ?? "Unnamed",
                " (section)"
              ] }),
              !C && /* @__PURE__ */ e.jsx(l, { onClick: () => s.moveSectionUp(t.id), children: /* @__PURE__ */ e.jsx("div", { className: "flex items-center justify-start gap-2", children: /* @__PURE__ */ e.jsx("span", { children: "Reorder up" }) }) }),
              !m && /* @__PURE__ */ e.jsx(l, { onClick: () => s.moveSectionDown(t.id), children: /* @__PURE__ */ e.jsx("div", { className: "flex items-center justify-start gap-2", children: /* @__PURE__ */ e.jsx("span", { children: "Reorder down" }) }) })
            ] }),
            /* @__PURE__ */ e.jsx(j, {}),
            /* @__PURE__ */ e.jsxs(f, { children: [
              /* @__PURE__ */ e.jsx(
                l,
                {
                  onClick: (o) => {
                    o.stopPropagation();
                    const r = `s_${h()}`;
                    s.createEmptySection(r, t.id), a(r), c("inspector");
                  },
                  children: /* @__PURE__ */ e.jsx("div", { className: "flex items-center justify-start gap-2", children: /* @__PURE__ */ e.jsx("span", { children: "Create new section below" }) })
                }
              ),
              N === !1 && /* @__PURE__ */ e.jsx(
                l,
                {
                  onClick: (o) => {
                    o.stopPropagation(), s.duplicateSection(t.id);
                  },
                  children: /* @__PURE__ */ e.jsx("div", { className: "flex items-center justify-start gap-2", children: /* @__PURE__ */ e.jsx("span", { children: "Duplicate" }) })
                }
              )
            ] }),
            /* @__PURE__ */ e.jsx(j, {}),
            /* @__PURE__ */ e.jsx(
              l,
              {
                color: "red",
                onClick: (o) => {
                  o.stopPropagation(), s.deleteSection(t.id), a(), w(), c();
                },
                children: /* @__PURE__ */ e.jsx("div", { className: "flex items-center justify-start gap-2.5", children: /* @__PURE__ */ e.jsx("span", { children: "Delete section" }) })
              }
            )
          ] })
        ] })
      ]
    }
  );
}
export {
  Pe as default
};
//# sourceMappingURL=EditableSectionButtons.js.map
