"use client";
import { jsxs as t, 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 o } 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.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: y,
  label: x = "Color",
  mode: g,
  fieldName: m,
  side: u = "bottom",
  align: f = "end",
  avoidCollisions: N = !0
}) => {
  const [i, a] = A(
    g ? `${m}.${g}` : `${m}`,
    h
  ), c = (r) => {
    const l = !!r.startsWith("var");
    if (r && l) {
      const k = document.querySelector("iframe").contentWindow.document.documentElement;
      return window.getComputedStyle(k).getPropertyValue(r.replace("var(", "").replace(")", ""));
    }
    return r;
  }, d = v(H), s = v(T), n = (r) => c(i ?? "") === c(r) ? /* @__PURE__ */ e(B, { className: "h-5 w-5 rounded border", style: { color: c(r) } }) : /* @__PURE__ */ e(F, { className: "h-5 w-5 rounded border", style: { color: c(r) } }), b = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950], w = (r) => {
    const l = document.querySelector(".panel-scroll-content");
    l && (r ? l.style.paddingBottom = "100vh" : l.style.paddingBottom = "0px");
  };
  return /* @__PURE__ */ t("div", { className: C("mt-4 flex items-center justify-between gap-1.5", y), children: [
    x && /* @__PURE__ */ e(V, { children: x }),
    /* @__PURE__ */ t("div", { className: "flex rounded-sm border", children: [
      /* @__PURE__ */ t(o, { onOpenChange: (r) => w(r), children: [
        /* @__PURE__ */ t(p, { children: [
          /* @__PURE__ */ e(p.Trigger, { children: /* @__PURE__ */ e(o.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__ */ t(
          o.Content,
          {
            className: "w-[260px] p-0",
            side: u,
            align: f,
            avoidCollisions: N,
            children: [
              /* @__PURE__ */ e("p", { className: "border-b px-5 py-3", children: "Global Colors" }),
              /* @__PURE__ */ e(o.Close, { className: "w-full", children: /* @__PURE__ */ e(
                "div",
                {
                  className: "cursor-pointer px-5 py-3 hover:bg-gray-100",
                  onClick: () => a("var(--text-color)"),
                  children: /* @__PURE__ */ t("div", { className: "flex items-center", children: [
                    n(s.color.textColor),
                    /* @__PURE__ */ e("p", { className: "ms-3 text-xs text-gray-500", children: "Text" }),
                    /* @__PURE__ */ e("p", { className: "ms-auto text-xs text-gray-500", children: s.color.textColor })
                  ] })
                }
              ) }),
              /* @__PURE__ */ e(o.Close, { className: "w-full", children: /* @__PURE__ */ e(
                "div",
                {
                  className: "cursor-pointer px-5 py-3 hover:bg-gray-100",
                  onClick: () => a("var(--background-color)"),
                  children: /* @__PURE__ */ t("div", { className: "flex items-center", children: [
                    n(s.color.backgroundColor),
                    /* @__PURE__ */ e("p", { className: "ms-3 text-xs text-gray-500", children: "Background" }),
                    /* @__PURE__ */ e("p", { className: "ms-auto text-xs text-gray-500", children: s.color.backgroundColor })
                  ] })
                }
              ) }),
              /* @__PURE__ */ e(o.Close, { className: "w-full", children: /* @__PURE__ */ e(
                "div",
                {
                  className: "cursor-pointer px-5 py-3 hover:bg-gray-100",
                  onClick: () => a("var(--accent-color)"),
                  children: /* @__PURE__ */ t("div", { className: "flex items-center", children: [
                    n(s.color.accentColor),
                    /* @__PURE__ */ e("p", { className: "ms-3 text-xs text-gray-500", children: "Accent" }),
                    /* @__PURE__ */ e("p", { className: "ms-auto text-xs text-gray-500", children: s.color.accentColor })
                  ] })
                }
              ) }),
              b.map((r, l) => /* @__PURE__ */ e(o.Close, { className: "w-full", children: /* @__PURE__ */ e(
                "div",
                {
                  className: "cursor-pointer px-5 py-3 hover:bg-gray-100",
                  onClick: () => a(`var(--accent-color-${r})`),
                  children: /* @__PURE__ */ t("div", { className: "flex items-center", children: [
                    n(`var(--accent-color-${r})`),
                    /* @__PURE__ */ t("p", { className: "ms-3 text-xs text-gray-500", children: [
                      "Accent ",
                      r
                    ] }),
                    /* @__PURE__ */ e("p", { className: "ms-auto text-xs text-gray-500", children: c(`var(--accent-color-${r})`) })
                  ] })
                }
              ) }, l)),
              d == null ? void 0 : d.map((r, l) => /* @__PURE__ */ e(o.Close, { className: "w-full", children: /* @__PURE__ */ e(
                "div",
                {
                  className: "cursor-pointer px-5 py-3 hover:bg-gray-100",
                  onClick: () => a(`var(--color-preset-${r.id})`),
                  children: /* @__PURE__ */ t("div", { className: "flex items-center", children: [
                    n(r.value),
                    /* @__PURE__ */ e("p", { className: "ms-3 text-xs text-gray-500", children: r.name }),
                    /* @__PURE__ */ e("p", { className: "ms-auto text-xs text-gray-500", children: r.value })
                  ] })
                }
              ) }, l)),
              /* @__PURE__ */ e(o.Arrow, { width: 16, height: 8, fill: "white" })
            ]
          }
        )
      ] }),
      /* @__PURE__ */ t(o, { children: [
        /* @__PURE__ */ e(o.Trigger, { asChild: !0, children: /* @__PURE__ */ e(
          "div",
          {
            className: C("relative cursor-pointer px-[10px] py-2", {
              "bg-gray-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: c(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__ */ t(o.Content, { className: "w-[270px] p-0", side: u, align: f, children: [
          /* @__PURE__ */ t("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: a }) }),
          /* @__PURE__ */ e(o.Arrow, { width: 16, height: 8, fill: "white" })
        ] })
      ] })
    ] })
  ] });
};
export {
  Q as ColorControl
};
//# sourceMappingURL=color.control.js.map
