import { jsx as r, jsxs as h } from "@emotion/react/jsx-runtime";
import { useModuleSkeleton as R, useEnvironment as j } from "@m4l/core";
import M from "clsx";
import { forwardRef as O, useMemo as y, isValidElement as V } from "react";
import { useComponentSize as $ } from "../../hooks/useComponentSize/index.js";
import { CHIP_CLASSES as d } from "./constants.js";
import { TEST_PROP_ID as H } from "../../test/constants_no_mock.js";
import { StartAdornmentImageWrapperStyled as L, EndAdornmentImageWrapperStyled as q, IconStyled as F, SkeletonChipStyled as G, ChipRootStyled as J, TextWrapperStyled as K, TextChipStyled as Q, DescriptionChipStyled as U, IconButtonStyled as X } from "./slots/ChipSlots.js";
import { isImageComponentElement as Y } from "../../helpers/isImageComponentElement/isImageComponentElement.js";
const Z = O((C, I) => {
  const {
    endIcon: b,
    label: D,
    description: o,
    startIcon: g,
    color: s = "default",
    externalColor: p,
    size: v,
    variant: m = "contained",
    skeletonWidth: z = "100%",
    opacity: c = !1,
    onClick: a,
    onDeleted: S,
    iconButtonProps: E,
    className: w,
    dataTestId: x,
    disabledDeleteButton: k,
    ellipsis: i = !1,
    ...A
  } = C, { currentSize: n } = $(v), N = R(), { host_static_assets: _, environment_assets: W } = j(), t = y(() => ({
    interactive: !!a,
    size: n,
    variant: m,
    color: s,
    opacity: c,
    externalColor: p,
    ellipsis: i,
    hasDescription: o != null
  }), [a, n, m, s, c, p, i, o]), u = y(() => (e, B, f) => {
    if (!e || typeof e == "boolean" || typeof e == "number")
      return null;
    if (typeof e != "string") {
      if (!V(e))
        return e;
      const l = Y(e);
      return l && f === "start" ? /* @__PURE__ */ r(L, { className: d.startAdornmentImageWrapper, ownerState: { ...t, isImageAdornment: l }, children: e }) : l && f === "end" ? /* @__PURE__ */ r(q, { className: d.endAdornmentImageWrapper, ownerState: { ...t, isImageAdornment: l }, children: e }) : e;
    } else
      return /* @__PURE__ */ r(
        F,
        {
          ownerState: t,
          src: e,
          size: n,
          instaceDataTestId: B
        }
      );
  }, [t, n]);
  if (N)
    return /* @__PURE__ */ r(
      G,
      {
        "data-testid": "SkeletonButton",
        width: z,
        ownerState: t
      }
    );
  const P = `${_}/${W}/frontend/components/chip/assets/icons/closeSmall.svg`, T = (e) => {
    e.stopPropagation(), S?.(e);
  };
  return /* @__PURE__ */ h(
    J,
    {
      role: "button-chip",
      size: n,
      onClick: a,
      ownerState: t,
      className: M(w, d.root),
      ref: I,
      ...process.env.NODE_ENV !== "production" ? { [H]: x } : {},
      ...a ? { tabIndex: 0 } : {},
      ...A,
      children: [
        u(g, "ChipStartIcon", "start"),
        /* @__PURE__ */ h(K, { ownerState: { ...t }, children: [
          /* @__PURE__ */ r(
            Q,
            {
              variant: t.hasDescription ? "bodyDens" : "bodyStandard",
              size: n,
              ownerState: { ...t },
              color: s,
              ellipsis: i,
              children: D
            }
          ),
          t.hasDescription ? /* @__PURE__ */ r(
            U,
            {
              variant: "bodyStandard",
              size: n,
              ownerState: { ...t },
              color: s,
              ellipsis: i,
              children: o
            }
          ) : null
        ] }),
        u(b, "ChipEndIcon", "end"),
        S && /* @__PURE__ */ r(
          X,
          {
            ...E,
            src: P,
            size: n,
            ownerState: t,
            onClick: T,
            disabled: k,
            className: d.closeIcon
          }
        )
      ]
    }
  );
});
Z.displayName = "Chip";
export {
  Z as Chip
};
