"use client";
import { jsxs as r, jsx as e } from "react/jsx-runtime";
import { ColorPicker as S } from "../shared/color-picker.js";
import { Label as V } from "../shared/label.js";
import { Popover as l } from "../shared/popover.js";
import { Tooltip as p } from "../shared/tooltip.js";
import { useSettings as A } from "../../hooks/use-settings.js";
import { getActiveThemeColorPresets as H, getActiveThemeSettings as T } from "../../../../../store/selectors.js";
import { useAppSelector as v } from "../../hooks/use-app-selector.js";
import { classNames as C } from "../../utils/index.js";
import { AiOutlineGlobal as $ } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/ai/index.js";
import { BsFillSquareFill as q } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/bs/index.js";
import { FaCheckSquare as B, FaSquare as F } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/fa/index.js";
import { ResetControl as M } from "./reset.control.js";
const Q = ({
  type: h,
  className: N,
  label: x = "Color",
  mode: u,
  fieldName: m,
  side: f = "bottom",
  align: g = "end",
  avoidCollisions: b = !0
}) => {
  const [i, s] = A(
    u ? `${m}.${u}` : `${m}`,
    h
  ), a = (t) => {
    const o = !!t.startsWith("var");
    if (t && o) {
      const k = document.querySelector("iframe").contentWindow.document.documentElement;
      return window.getComputedStyle(k).getPropertyValue(t.replace("var(", "").replace(")", ""));
    }
    return t;
  }, d = v(H), c = v(T), n = (t) => a(i ?? "") === a(t) ? /* @__PURE__ */ e(B, { className: "h-5 w-5 rounded border", style: { color: a(t) } }) : /* @__PURE__ */ e(F, { className: "h-5 w-5 rounded border", style: { color: a(t) } }), w = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950], y = (t) => {
    const o = document.querySelector(".panel-scroll-content");
    o && (t ? o.style.paddingBottom = "100vh" : o.style.paddingBottom = "0px");
  };
  return /* @__PURE__ */ r("div", { className: C("mt-4 flex items-center justify-between gap-1.5", N), children: [
    x && /* @__PURE__ */ e(V, { children: x }),
    /* @__PURE__ */ r("div", { className: "flex rounded-sm border", children: [
      /* @__PURE__ */ r(l, { onOpenChange: (t) => y(t), children: [
        /* @__PURE__ */ r(p, { children: [
          /* @__PURE__ */ e(p.Trigger, { children: /* @__PURE__ */ e(l.Trigger, { asChild: !0, children: /* @__PURE__ */ e("div", { className: "cursor-pointer border-r px-[10px] py-2", children: /* @__PURE__ */ e($, { className: "text-sm" }) }) }) }),
          /* @__PURE__ */ e(p.Content, { children: "Custom" })
        ] }),
        /* @__PURE__ */ r(
          l.Content,
          {
            className: "w-[260px] p-0",
            side: f,
            align: g,
            avoidCollisions: b,
            children: [
              /* @__PURE__ */ e("p", { className: "border-b px-5 py-3", children: "Global Colors" }),
              /* @__PURE__ */ e(l.Close, { className: "w-full", children: /* @__PURE__ */ e(
                "div",
                {
                  className: "cursor-pointer px-5 py-3 hover:bg-slate-100",
                  onClick: () => s("var(--text-color)"),
                  children: /* @__PURE__ */ r("div", { className: "flex items-center", children: [
                    n(c.color.textColor),
                    /* @__PURE__ */ e("p", { className: "ms-3 text-xs text-slate-500", children: "Text" }),
                    /* @__PURE__ */ e("p", { className: "ms-auto text-xs text-slate-500", children: c.color.textColor })
                  ] })
                }
              ) }),
              /* @__PURE__ */ e(l.Close, { className: "w-full", children: /* @__PURE__ */ e(
                "div",
                {
                  className: "cursor-pointer px-5 py-3 hover:bg-slate-100",
                  onClick: () => s("var(--background-color)"),
                  children: /* @__PURE__ */ r("div", { className: "flex items-center", children: [
                    n(c.color.backgroundColor),
                    /* @__PURE__ */ e("p", { className: "ms-3 text-xs text-slate-500", children: "Background" }),
                    /* @__PURE__ */ e("p", { className: "ms-auto text-xs text-slate-500", children: c.color.backgroundColor })
                  ] })
                }
              ) }),
              /* @__PURE__ */ e(l.Close, { className: "w-full", children: /* @__PURE__ */ e(
                "div",
                {
                  className: "cursor-pointer px-5 py-3 hover:bg-slate-100",
                  onClick: () => s("var(--accent-color)"),
                  children: /* @__PURE__ */ r("div", { className: "flex items-center", children: [
                    n(c.color.accentColor),
                    /* @__PURE__ */ e("p", { className: "ms-3 text-xs text-slate-500", children: "Accent" }),
                    /* @__PURE__ */ e("p", { className: "ms-auto text-xs text-slate-500", children: c.color.accentColor })
                  ] })
                }
              ) }),
              w.map((t, o) => /* @__PURE__ */ e(l.Close, { className: "w-full", children: /* @__PURE__ */ e(
                "div",
                {
                  className: "cursor-pointer px-5 py-3 hover:bg-slate-100",
                  onClick: () => s(`var(--accent-color-${t})`),
                  children: /* @__PURE__ */ r("div", { className: "flex items-center", children: [
                    n(`var(--accent-color-${t})`),
                    /* @__PURE__ */ r("p", { className: "ms-3 text-xs text-slate-500", children: [
                      "Accent ",
                      t
                    ] }),
                    /* @__PURE__ */ e("p", { className: "ms-auto text-xs text-slate-500", children: a(`var(--accent-color-${t})`) })
                  ] })
                }
              ) }, o)),
              d == null ? void 0 : d.map((t, o) => /* @__PURE__ */ e(l.Close, { className: "w-full", children: /* @__PURE__ */ e(
                "div",
                {
                  className: "cursor-pointer px-5 py-3 hover:bg-slate-100",
                  onClick: () => s(`var(--color-preset-${t.id})`),
                  children: /* @__PURE__ */ r("div", { className: "flex items-center", children: [
                    n(t.value),
                    /* @__PURE__ */ e("p", { className: "ms-3 text-xs text-slate-500", children: t.name }),
                    /* @__PURE__ */ e("p", { className: "ms-auto text-xs text-slate-500", children: t.value })
                  ] })
                }
              ) }, o)),
              /* @__PURE__ */ e(l.Arrow, { width: 16, height: 8, fill: "white" })
            ]
          }
        )
      ] }),
      /* @__PURE__ */ r(l, { children: [
        /* @__PURE__ */ e(l.Trigger, { asChild: !0, children: /* @__PURE__ */ e(
          "div",
          {
            className: C("relative cursor-pointer px-[10px] py-2", {
              "bg-slate-50 after:absolute after:left-[50%] after:top-[50%] after:h-px after:w-8 after:translate-x-[-50%] after:translate-y-[-50%] after:-rotate-45 after:bg-red-500 after:content-['']": !i
            }),
            children: /* @__PURE__ */ e(
              q,
              {
                style: {
                  // color: color ?? '#bbb',
                  color: a(i ?? "#bbb"),
                  background: `url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>')`,
                  backgroundSize: "0.5em",
                  borderRadius: "0.15em"
                },
                className: "text-sm"
              }
            )
          }
        ) }),
        /* @__PURE__ */ r(l.Content, { className: "w-[270px] p-0", side: f, align: g, children: [
          /* @__PURE__ */ r("p", { className: "flex items-center px-4 py-3 shadow-md", children: [
            "Color Picker ",
            /* @__PURE__ */ e(M, { fieldName: m, settingsType: h })
          ] }),
          /* @__PURE__ */ e("div", { className: "p-4", children: /* @__PURE__ */ e(S, { color: i, onChange: s }) }),
          /* @__PURE__ */ e(l.Arrow, { width: 16, height: 8, fill: "white" })
        ] })
      ] })
    ] })
  ] });
};
export {
  Q as ColorControl
};
//# sourceMappingURL=color.control.js.map
