import { jsxs as n, jsx as a, Fragment as y } from "react/jsx-runtime";
import { TinyColor as C } from "@ctrl/tinycolor";
import { useState as f, useEffect as k } from "react";
import { RgbaColorPicker as H } from "react-colorful";
import { Dropdown as P } from "../Dropdown/Dropdown.es.js";
import { TextInputType as i } from "../TextInput/TextInput.es.js";
import { toShortRgb as z, toLongRgb as R } from "../../utilities/colors.es.js";
import { ColorInput as r, DecoratorPosition as T } from "./ColorInput.es.js";
import { ColorFormat as b } from "../../types/colors.es.js";
const v = (t) => new C(z(t)).toHex(), V = ({
  currentColor: t,
  currentFormat: s,
  setFormat: m,
  onSelect: o
}) => {
  const N = [
    {
      id: "color-picker-format-dropdown-block",
      menuItems: Object.values(b).map((e) => ({ id: e, title: e.toLocaleUpperCase() }))
    }
  ], { red: p, green: d, blue: c, alpha: l = 1 } = t, [h, w] = f(() => v(t)), [I, u] = f(l), g = () => {
    const e = new C(h);
    e.isValid && o(R(e.toRgb()));
  };
  return k(() => {
    u(l), w(v(t));
  }, [l, t]), /* @__PURE__ */ n("div", { className: "tw-flex tw-flex-col tw-gap-4", "data-test-id": "custom-color-picker", id: "custom-color-picker", children: [
    /* @__PURE__ */ n("div", { className: "tw-flex tw-flex-col md:tw-flex-row tw-gap-2 tw-max-w-full", children: [
      /* @__PURE__ */ a("div", { className: "tw-min-w-[84px]", children: /* @__PURE__ */ a(
        P,
        {
          menuBlocks: N,
          activeItemId: s,
          onChange: (e) => e && m && m(e)
        }
      ) }),
      s === b.Hex ? /* @__PURE__ */ a("div", { className: "tw-flex-1", children: /* @__PURE__ */ a(
        r,
        {
          value: h,
          decorator: "#",
          size: 6,
          onChange: w,
          onEnterPressed: g,
          onBlur: g,
          "aria-label": "Color HEX Value"
        }
      ) }) : /* @__PURE__ */ n(y, { children: [
        /* @__PURE__ */ a("div", { className: "tw-flex-1", children: /* @__PURE__ */ a(
          r,
          {
            min: 0,
            max: 255,
            size: 3,
            type: i.Number,
            value: p.toString(),
            onChange: (e) => o({ ...t, red: parseInt(e || "0") }),
            "aria-label": "Color Code Type"
          }
        ) }),
        /* @__PURE__ */ a("div", { className: "tw-flex-1", children: /* @__PURE__ */ a(
          r,
          {
            min: 0,
            max: 255,
            size: 3,
            type: i.Number,
            value: d.toString(),
            onChange: (e) => o({ ...t, green: parseInt(e || "0") }),
            "aria-label": "Color Value"
          }
        ) }),
        /* @__PURE__ */ a("div", { className: "tw-flex-1", children: /* @__PURE__ */ a(
          r,
          {
            min: 0,
            max: 255,
            size: 3,
            type: i.Number,
            value: c.toString(),
            onChange: (e) => o({ ...t, blue: parseInt(e || "0") }),
            "aria-label": "Color Opacity"
          }
        ) })
      ] }),
      /* @__PURE__ */ a(
        r,
        {
          min: 0,
          max: 100,
          size: 3,
          type: i.Number,
          value: Math.trunc(I * 100).toString(),
          decorator: "%",
          decoratorPosition: T.Right,
          onChange: (e) => {
            const x = parseInt(e || "0") / 100;
            u(x), o({ ...t, alpha: x });
          }
        }
      )
    ] }),
    /* @__PURE__ */ a("div", { className: "tw-flex tw-gap-2 tw-w-full tw-h-[200px]", children: /* @__PURE__ */ a("div", { className: "tw-relative tw-grow tw-rounded", children: /* @__PURE__ */ a(
      H,
      {
        color: { r: p, g: d, b: c, a: l },
        onChange: (e) => o({
          red: e.r,
          green: e.g,
          blue: e.b,
          alpha: e.a
        }),
        style: { width: "100%" }
      }
    ) }) })
  ] });
};
V.displayName = "FondueCustomColorPicker";
export {
  V as CustomColorPicker
};
//# sourceMappingURL=CustomColorPicker.es.js.map
