"use client";
import { jsxs as r, Fragment as y, jsx as e } from "react/jsx-runtime";
import { Accordion as t } from "../../shared/accordion.js";
import { Button as T } from "../../shared/button.js";
import { ColorPicker as m } from "../../shared/color-picker.js";
import { Label as P } from "../../shared/label.js";
import { Popover as o } from "../../shared/popover.js";
import { useSettings as d } from "../../../hooks/use-settings.js";
import { SettingsType as h, ThemeSettingsType as k } from "../../../types/index.js";
import { createId as E } from "../../../../../../utils.js";
import { l as p } from "../../../../../../_virtual/lodash.js";
import { ContentEditable as A } from "../../shared/content-editable.js";
import { BsFillSquareFill as g, BsTrash as B, BsPlus as S } from "../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/bs/index.js";
import { FiX as D } from "../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/fi/index.js";
import { VscSymbolColor as O } from "../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/vsc/index.js";
const Q = ({ setCurrentSetting: C }) => {
  const [u, v] = d("color.textColor", h.THEME), [x, w] = d(
    "color.accentColor",
    h.THEME
  ), [f, b] = d(
    "color.backgroundColor",
    h.THEME
  ), [s, c] = d(
    "color.presets",
    h.THEME
  );
  return /* @__PURE__ */ r(y, { children: [
    /* @__PURE__ */ r("div", { className: "flex items-center justify-between border-b p-4", children: [
      /* @__PURE__ */ r("div", { className: "flex items-center gap-2 text-base font-semibold", children: [
        /* @__PURE__ */ e(O, {}),
        "Global Colors"
      ] }),
      /* @__PURE__ */ e(
        "button",
        {
          className: "text-gray-600 hover:text-gray-900",
          onClick: () => C(k.GLOBAL),
          children: /* @__PURE__ */ e(D, { size: 16 })
        }
      )
    ] }),
    /* @__PURE__ */ r(t, { defaultValue: ["system", "custom"], type: "multiple", children: [
      /* @__PURE__ */ r(t.Item, { value: "system", children: [
        /* @__PURE__ */ e(t.Trigger, { className: "px-4", children: "System Colors" }),
        /* @__PURE__ */ r(t.Content, { className: "px-4", children: [
          /* @__PURE__ */ r("div", { className: "flex items-center gap-2 ", children: [
            /* @__PURE__ */ e("p", { className: "me-auto text-xs text-gray-700", children: "Background" }),
            /* @__PURE__ */ r(o, { children: [
              /* @__PURE__ */ e(o.Trigger, { className: "cursor-pointer rounded-sm border p-1.5", children: /* @__PURE__ */ e(g, { color: f, className: " text-sm" }) }),
              /* @__PURE__ */ e(o.Portal, { children: /* @__PURE__ */ r(o.Content, { align: "end", alignOffset: -10, className: "w-[270px] p-0", children: [
                /* @__PURE__ */ e("p", { className: "px-4 py-3 shadow-md", children: "Color Picker" }),
                /* @__PURE__ */ e("div", { className: "p-4", children: /* @__PURE__ */ e(m, { color: f, onChange: b }) }),
                /* @__PURE__ */ e(o.Arrow, { width: 16, height: 8, fill: "white" })
              ] }) })
            ] })
          ] }),
          /* @__PURE__ */ r("div", { className: "mt-4 flex items-center gap-2 ", children: [
            /* @__PURE__ */ e("p", { className: "me-auto text-xs text-gray-700", children: "Accent" }),
            /* @__PURE__ */ r(o, { children: [
              /* @__PURE__ */ e(o.Trigger, { className: "cursor-pointer rounded-sm border p-1.5", children: /* @__PURE__ */ e(g, { color: x, className: " text-sm" }) }),
              /* @__PURE__ */ e(o.Portal, { children: /* @__PURE__ */ r(o.Content, { align: "end", alignOffset: -10, className: "w-[270px] p-0", children: [
                /* @__PURE__ */ e("p", { className: "px-4 py-3 shadow-md", children: "Color Picker" }),
                /* @__PURE__ */ e("div", { className: "p-4", children: /* @__PURE__ */ e(m, { disableAlpha: !0, color: x, onChange: w }) }),
                /* @__PURE__ */ e(o.Arrow, { width: 16, height: 8, fill: "white" })
              ] }) })
            ] })
          ] }),
          /* @__PURE__ */ r("div", { className: "mt-4 flex items-center gap-2", children: [
            /* @__PURE__ */ e("p", { className: "me-auto text-xs text-gray-700", children: "Text" }),
            /* @__PURE__ */ r(o, { children: [
              /* @__PURE__ */ e(o.Trigger, { className: "cursor-pointer rounded-sm border p-1.5", children: /* @__PURE__ */ e(g, { color: u, className: " text-sm" }) }),
              /* @__PURE__ */ e(o.Portal, { children: /* @__PURE__ */ r(o.Content, { align: "end", alignOffset: -10, className: "w-[270px] p-0", children: [
                /* @__PURE__ */ e("p", { className: "px-4 py-3 shadow-md", children: "Color Picker" }),
                /* @__PURE__ */ e("div", { className: "p-4", children: /* @__PURE__ */ e(m, { color: u, onChange: v }) }),
                /* @__PURE__ */ e(o.Arrow, { width: 16, height: 8, fill: "white" })
              ] }) })
            ] })
          ] })
        ] })
      ] }),
      /* @__PURE__ */ r(t.Item, { value: "custom", children: [
        /* @__PURE__ */ e(t.Trigger, { className: "px-4", children: "Custom Colors" }),
        /* @__PURE__ */ r(t.Content, { className: "pe-4 ps-2", children: [
          s.map((a, n) => /* @__PURE__ */ r("div", { className: "group mt-4 flex items-center gap-2 first:mt-2 ", children: [
            /* @__PURE__ */ e(
              A,
              {
                onChange: (l) => {
                  const i = l.target.value, N = p.cloneDeep(s);
                  N[n].name = i, c(N);
                },
                onKeyDown: (l) => l.key === "Enter" && l.preventDefault(),
                html: a.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__ */ e(P, { children: /* @__PURE__ */ e(
              B,
              {
                onClick: () => {
                  const l = p.cloneDeep(s);
                  l.splice(n, 1), c(l);
                },
                className: "hover:text-danger-500 mx-2 hidden cursor-pointer group-hover:block"
              }
            ) }),
            /* @__PURE__ */ r(o, { children: [
              /* @__PURE__ */ e(o.Trigger, { className: "cursor-pointer rounded-sm border p-1.5", children: /* @__PURE__ */ e(g, { color: a.value, className: " text-sm" }) }),
              /* @__PURE__ */ e(o.Portal, { children: /* @__PURE__ */ r(o.Content, { align: "end", alignOffset: -10, className: "w-[270px] p-0", children: [
                /* @__PURE__ */ e("p", { className: "px-4 py-3 shadow-md", children: "Color Picker" }),
                /* @__PURE__ */ e("div", { className: "p-4", children: /* @__PURE__ */ e(
                  m,
                  {
                    color: a.value,
                    onChange: (l) => {
                      const i = p.cloneDeep(s);
                      i[n].value = l, c(i);
                    }
                  }
                ) }),
                /* @__PURE__ */ e(o.Arrow, { width: 16, height: 8, fill: "white" })
              ] }) })
            ] })
          ] }, n)),
          /* @__PURE__ */ e("div", { className: "mt-5 flex justify-center", children: /* @__PURE__ */ r(
            T,
            {
              onClick: () => {
                const a = p.cloneDeep(s);
                a.push({
                  id: E(),
                  name: `Color #${s.length + 1}`,
                  value: "#000000"
                }), c(a);
              },
              variant: "outline",
              className: "flex",
              children: [
                /* @__PURE__ */ e(S, { size: 20, className: "me-1" }),
                "Add Color"
              ]
            }
          ) })
        ] })
      ] })
    ] })
  ] });
};
export {
  Q as default
};
//# sourceMappingURL=theme-color-settings.js.map
