import { jsxs as h, jsx as o, Fragment as V } from "@emotion/react/jsx-runtime";
import { useMemo as M } from "react";
import { clsx as Y } from "clsx";
import { useComponentSize as $ } from "../../hooks/useComponentSize/index.js";
import { getPropDataTestId as c } from "../../test/getNameDataTestId.js";
import { getComponentClasses as j } from "../../utils/getComponentSlotRoot.js";
import { COLOR_PICKER_DEFAULT_EMPTY_VALUE_LABEL as G, COLOR_PICKER_DEFAULT_QUICK_COLORS as q, COLOR_PICKER_FIELD_TRIGGER_OPEN_KEYS as H, COLOR_PICKER_KEY_COMPONENT as t } from "./constants.js";
import { useColorPicker as J } from "./hooks/useColorPicker/useColorPicker.js";
import { RootStyled as W, TextFieldTriggerStyled as X, QuickColorsStyled as Z, IconButtonStyled as b, PopoverStyled as ee, SketchPickerStyled as oe } from "./slots/ColorPickerSlots.js";
import { Color as O } from "../Color/Color.js";
import { ColorPickerSlots as l } from "./slots/ColorPickerEnum.js";
import { ActionsContainer as re } from "../CommonActions/components/ActionsContainer/ActionsContainer.js";
import { ActionCancel as te } from "../CommonActions/components/ActionCancel/ActionCancel.js";
import { ActionIntro as le } from "../CommonActions/components/ActionIntro/ActionIntro.js";
const Pe = (v) => {
  const {
    value: i,
    onChange: z,
    error: f,
    variant: g = "colorPicker",
    quickColors: L,
    emptyValueLabel: T = G,
    size: F,
    disabled: d,
    isSkeleton: a,
    className: I,
    instaceDataTestId: n
  } = v, s = j(t, l), { currentSize: r } = $(F), m = typeof f == "boolean" ? f : !!f, E = g === "colorFieldPicker", p = L ?? q, N = M(
    () => p.filter(
      (e) => typeof e == "string"
    ),
    [p]
  ), R = i?.toUpperCase() ?? T, {
    anchorEl: C,
    tempColor: x,
    triggerOwnerState: k,
    handleOpenPicker: P,
    handleClosePicker: K,
    handleColorChange: B,
    handleConfirm: w,
    handleQuickColorSelect: A,
    handleCancel: D
  } = J({
    value: i,
    onChange: z,
    error: m,
    disabled: d,
    isSkeleton: a,
    variant: g,
    currentSize: r
  }), S = {
    ...k,
    size: r,
    disabled: a || d,
    value: i ?? null,
    error: m,
    open: !!C,
    variant: g,
    hasQuickColors: E && p.length > 0
  };
  return /* @__PURE__ */ h(
    W,
    {
      className: Y(I, s.root),
      ownerState: S,
      children: [
        E ? /* @__PURE__ */ h(V, { children: [
          /* @__PURE__ */ h(
            X,
            {
              type: "button",
              ...c(
                t,
                l.textFieldTrigger,
                n
              ),
              className: s.textFieldTrigger,
              disabled: a || d,
              "aria-expanded": !!C,
              "aria-haspopup": "dialog",
              "aria-invalid": m ? "true" : void 0,
              onClick: P,
              onKeyDown: (e) => {
                !C && H.some(
                  (u) => u === e.key
                ) && (e.preventDefault(), P(e));
              },
              ownerState: S,
              children: [
                /* @__PURE__ */ o(O, { value: i, size: r }),
                /* @__PURE__ */ o("span", { className: "M4LColorPicker-textFieldTriggerValue", children: R })
              ]
            }
          ),
          p.length > 0 && /* @__PURE__ */ o(
            Z,
            {
              className: s.quickColors,
              ownerState: S,
              children: p.map((e, _) => {
                const u = e?.toUpperCase() ?? null, U = i?.toUpperCase() ?? null, y = u === U, Q = e ? `Select color ${u}` : "Select no color";
                return /* @__PURE__ */ o(
                  b,
                  {
                    ...c(
                      t,
                      l.iconButton,
                      n
                    ),
                    className: s.iconButton,
                    color: y ? "primary" : "default",
                    variant: y ? "outline" : "text",
                    selected: y,
                    disabled: a || d,
                    "aria-label": Q,
                    onClick: () => A(
                      e
                    ),
                    icon: /* @__PURE__ */ o(O, { value: e, size: r })
                  },
                  `${u ?? "empty"}-${_}`
                );
              })
            }
          )
        ] }) : /* @__PURE__ */ o(
          b,
          {
            ...c(
              t,
              l.iconButton,
              n
            ),
            className: s.iconButton,
            onClick: P,
            variant: "text",
            "aria-busy": a,
            "aria-invalid": m ? "true" : void 0,
            color: m ? "error" : "default",
            disabled: a || d,
            ownerState: k,
            size: r,
            icon: /* @__PURE__ */ o(O, { value: i, size: r })
          }
        ),
        /* @__PURE__ */ h(
          ee,
          {
            ...c(
              t,
              l.popover,
              n
            ),
            className: s.popover,
            size: r,
            ownerState: k,
            open: !!C,
            arrowType: "no-arrow",
            anchorEl: C,
            onClose: K,
            anchorOrigin: {
              vertical: "bottom",
              horizontal: "left"
            },
            transformOrigin: {
              vertical: "top",
              horizontal: "left"
            },
            children: [
              /* @__PURE__ */ o(
                oe,
                {
                  ...c(
                    t,
                    l.sketchPicker,
                    n
                  ),
                  className: s.sketchPicker,
                  ownerState: k,
                  color: x ?? i ?? void 0,
                  onChange: B,
                  disableAlpha: !0,
                  presetColors: N
                }
              ),
              /* @__PURE__ */ h(re, { children: [
                /* @__PURE__ */ o(
                  te,
                  {
                    ...c(
                      t,
                      l.actionCancel,
                      n
                    ),
                    onClick: D,
                    size: r
                  }
                ),
                /* @__PURE__ */ o(
                  le,
                  {
                    ...c(
                      t,
                      l.actionIntro,
                      n
                    ),
                    onClick: w,
                    disabled: a || d,
                    size: r
                  }
                )
              ] })
            ]
          }
        )
      ]
    }
  );
};
export {
  Pe as ColorPicker
};
