"use client";
import { jsxs as t, Fragment as E, jsx as e } from "react/jsx-runtime";
import { BackgroundControl as u } from "../../controls/background.control.js";
import { ColorControl as c } from "../../controls/color.control.js";
import { TextShadowControl as g } from "../../controls/text-shadow.control.js";
import { TypographyControl as v } from "../../controls/typography.control.js";
import { Button as y } from "../../shared/button.js";
import { Popover as i } from "../../shared/popover.js";
import { Tabs as s } from "../../shared/tabs.js";
import { useSettings as T } from "../../../hooks/use-settings.js";
import { SettingsType as l } from "../../../types/index.js";
import { PseudoClass as r } from "../../../types/style.js";
import { createId as b } from "../../../../../../utils.js";
import { l as f } from "../../../../../../_virtual/lodash.js";
import { ContentEditable as N } from "../../shared/content-editable.js";
import { BsPlus as x } from "../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/bs/index.js";
import { CiEdit as C } from "../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/ci/index.js";
const S = () => {
  const [a, p] = T("button.presets", l.THEME);
  return /* @__PURE__ */ t(E, { children: [
    a.map((m, o) => /* @__PURE__ */ t("div", { className: "mt-2 flex items-center justify-between", children: [
      /* @__PURE__ */ e(
        N,
        {
          onChange: (n) => {
            const h = n.target.value, d = f.cloneDeep(a);
            d[o].name = h, p(d);
          },
          onKeyDown: (n) => n.key === "Enter" && n.preventDefault(),
          html: m.name,
          tagName: "p",
          className: "me-auto rounded-sm border border-transparent px-2 py-1 text-xs hover:border-gray-100 focus-visible:border-gray-100 focus-visible:outline-0"
        }
      ),
      /* @__PURE__ */ t(i, { children: [
        /* @__PURE__ */ e(i.Trigger, { asChild: !0, children: /* @__PURE__ */ e("div", { className: "cursor-pointer rounded-sm border bg-gray-50 px-3 py-1.5", children: /* @__PURE__ */ e(C, {}) }) }),
        /* @__PURE__ */ t(i.Content, { align: "center", side: "left", children: [
          /* @__PURE__ */ e(
            v,
            {
              type: l.THEME,
              fieldName: `button.presets.${o}.value.typography`,
              className: "mt-0"
            }
          ),
          /* @__PURE__ */ e(
            g,
            {
              fieldName: `button.presets.${o}.value.textShadow`,
              type: l.THEME
            }
          ),
          /* @__PURE__ */ t(s, { defaultValue: r.DEFAULT, className: "mt-4", children: [
            /* @__PURE__ */ t(s.List, { className: "h-8 w-full rounded-full", children: [
              /* @__PURE__ */ e(
                s.Trigger,
                {
                  className: "flex-1 rounded-full p-[3px] text-[13px]",
                  value: r.DEFAULT,
                  children: "Normal"
                }
              ),
              /* @__PURE__ */ e(
                s.Trigger,
                {
                  className: "flex-1 rounded-full p-[3px] text-[13px]",
                  value: r.HOVER,
                  children: "Hover"
                }
              )
            ] }),
            /* @__PURE__ */ t(s.Content, { value: r.DEFAULT, children: [
              /* @__PURE__ */ e(
                c,
                {
                  fieldName: `button.presets.${o}.value.color`,
                  type: l.THEME,
                  mode: r.DEFAULT
                }
              ),
              /* @__PURE__ */ e(
                u,
                {
                  fieldName: `button.presets.${o}.value.background`,
                  type: l.THEME,
                  mode: r.DEFAULT,
                  showImage: !1
                }
              )
            ] }),
            /* @__PURE__ */ t(s.Content, { value: r.HOVER, children: [
              /* @__PURE__ */ e(
                c,
                {
                  fieldName: `button.presets.${o}.value.color`,
                  mode: r.HOVER,
                  type: l.THEME
                }
              ),
              /* @__PURE__ */ e(
                u,
                {
                  fieldName: `button.presets.${o}.value.background`,
                  type: l.THEME,
                  mode: r.HOVER,
                  showImage: !1
                }
              )
            ] })
          ] }),
          /* @__PURE__ */ e(i.Arrow, { width: 16, height: 8, fill: "white" })
        ] })
      ] })
    ] }, o)),
    /* @__PURE__ */ e("div", { className: "mt-5 flex justify-center", children: /* @__PURE__ */ t(
      y,
      {
        onClick: () => {
          const m = f.cloneDeep(a);
          m.push({
            name: `Type #${a.length + 1}`,
            value: {},
            id: b()
          }), p(m);
        },
        variant: "outline",
        className: "flex",
        children: [
          /* @__PURE__ */ e(x, { size: 20, className: "me-1" }),
          "Add Type"
        ]
      }
    ) })
  ] });
};
export {
  S as default
};
//# sourceMappingURL=theme-button-presets.js.map
