import { jsxs as n, jsx as t } from "react/jsx-runtime";
import { TinyColor as L } from "@ctrl/tinycolor";
import { useState as d, useEffect as v } from "react";
import { SegmentedControls as C } from "../SegmentedControls/SegmentedControls.es.js";
import { TextInput as k } from "../TextInput/TextInput.es.js";
import I from "../../foundation/Icon/Generated/IconCheckMark.es.js";
import S from "../../foundation/Icon/Generated/IconGridRegular.es.js";
import y from "../../foundation/Icon/Generated/IconMagnifier.es.js";
import z from "../../foundation/Icon/Generated/IconStackVertical.es.js";
import { IconSize as T } from "../../foundation/Icon/IconSize.es.js";
import { isColorLight as j, toShortRgb as G } from "../../utilities/colors.es.js";
import { merge as x } from "../../utilities/merge.es.js";
const m = (r, l = "") => r == null ? void 0 : r.toLocaleLowerCase().includes(l.toLocaleLowerCase().trim()), R = ({ palettes: r = [], currentColor: l, onSelect: g }) => {
  const f = [
    { id: "Grid", icon: /* @__PURE__ */ t(S, {}), ariaLabel: "Grid" },
    { id: "List", icon: /* @__PURE__ */ t(z, {}), ariaLabel: "List" }
  ], [c, h] = d(f[0].id), [a, u] = d(""), [b, N] = d(r);
  v(() => {
    const i = setTimeout(() => {
      N(
        r.filter(({ title: o, colors: s }) => m(o, a) || s.some(({ name: e }) => m(e, a))).map(({ id: o, title: s, colors: e }) => ({
          id: o,
          title: s,
          colors: e.some(({ name: w }) => m(w, a)) ? e.filter(({ name: w }) => m(w, a)) : e
        }))
      );
    }, 200);
    return () => clearTimeout(i);
  }, [r, a]);
  const p = b.filter((i) => i.colors.length > 0);
  return /* @__PURE__ */ n("div", { className: "tw-flex tw-flex-col tw-gap-4", "data-test-id": "brand-color-picker", children: [
    /* @__PURE__ */ n("div", { className: "tw-flex tw-gap-2", children: [
      /* @__PURE__ */ t("div", { className: "tw-flex-1", children: /* @__PURE__ */ t(
        k,
        {
          value: a,
          decorator: /* @__PURE__ */ t(y, {}),
          placeholder: "Search",
          onChange: (i) => u(i),
          clearable: !0
        }
      ) }),
      /* @__PURE__ */ t("div", { className: "tw-w-[72px]", children: /* @__PURE__ */ t(
        C,
        {
          size: "small",
          items: f,
          activeItemId: c,
          onChange: (i) => h(i)
        }
      ) })
    ] }),
    /* @__PURE__ */ t("ul", { className: "tw-flex tw-flex-col tw-gap-4", children: p.length > 0 ? p.map(({ id: i, title: o, colors: s }) => /* @__PURE__ */ n("li", { className: "tw-flex tw-flex-col tw-gap-2", children: [
      /* @__PURE__ */ t("p", { className: "tw-text-black tw-text-xs tw-font-medium dark:tw-text-white", children: o }),
      /* @__PURE__ */ t(
        "ul",
        {
          className: x([
            "tw-flex tw-gap-y-2 tw-flex-wrap",
            c === "List" && "tw-flex-col"
          ]),
          children: s.map((e) => /* @__PURE__ */ t("li", { "data-test-id": "brand-color", children: /* @__PURE__ */ n(
            "button",
            {
              className: "tw-flex tw-w-full",
              onClick: () => g(e),
              type: "button",
              "aria-label": `color value: ${e.name}`,
              children: [
                /* @__PURE__ */ t(
                  "span",
                  {
                    className: x([
                      "tw-h-6 tw-w-6 tw-mr-2 tw-rounded tw-flex tw-items-center tw-justify-center tw-ring-1 tw-ring-black-10 tw-ring-offset-1",
                      j(e) ? "tw-text-black" : "tw-text-white"
                    ]),
                    style: { background: new L(G(e)).toRgbString() },
                    children: e.red === l.red && e.green === l.green && e.blue === l.blue && e.alpha === l.alpha && /* @__PURE__ */ t(I, { size: T.Size20 })
                  }
                ),
                c === "List" && /* @__PURE__ */ t("span", { className: "tw-h-6 tw-grow tw-flex tw-items-center tw-text-sm tw-text-left", children: e.name })
              ]
            }
          ) }, e.name))
        }
      )
    ] }, i)) : "No colors found" })
  ] });
};
R.displayName = "FondueBrandColorPicker";
export {
  R as BrandColorPicker
};
//# sourceMappingURL=BrandColorPicker.es.js.map
