import { jsx as o, jsxs as h } from "@emotion/react/jsx-runtime";
import { useModuleSkeleton as $, useEnvironment as U } from "@m4l/core";
import M from "clsx";
import y, { useMemo as A } from "react";
import { useComponentSize as V } from "../../../../hooks/useComponentSize/index.js";
import { MENUITEM_CLASSES as t } from "./constants.js";
import { MenuItemIconStyled as q, StartAdornmentImageWrapperStyled as B, EndAdornmentImageWrapperStyled as F, MenuItemSkeletonStyled as G, MenuItemRootStyled as H, MenuItemIconCheckedStyled as J, MenuItemLabelWrapperStyled as K, MenuItemTypographyStyled as O, MenuItemDescriptionStyled as P } from "./slots/MenuItemSlots.js";
import { isImageComponentElement as Q } from "../../../../helpers/isImageComponentElement/isImageComponentElement.js";
const de = (b) => {
  const {
    startIcon: k,
    endIcon: v,
    startAdornment: u,
    endAdornment: S,
    label: w,
    description: a,
    value: z,
    skeletonWidth: E = "100%",
    selected: s = !1,
    color: p = "default",
    disabled: d = !1,
    size: g = "medium",
    checked: I = !1,
    checkable: i = !1,
    className: D,
    dataTestId: x,
    ...N
  } = b, W = u !== void 0 ? u : k, _ = S !== void 0 ? S : v, { currentSize: l } = V(g), C = $(), { host_static_assets: L, environment_assets: R } = U(), n = l === "small" || l === "medium" ? l : "medium", e = A(() => ({
    size: n,
    disabled: d,
    selected: s,
    color: p,
    checkable: i,
    checked: I,
    hasDescription: a != null
  }), [n, d, s, p, i, I, a]), f = A(() => (r, T, c) => {
    if (!r || typeof r == "boolean" || typeof r == "number")
      return null;
    if (typeof r == "string")
      return /* @__PURE__ */ o(
        q,
        {
          ownerState: { ...e },
          selected: s,
          enabledSelected: !0,
          src: r,
          alt: "icon",
          size: n,
          disabled: d,
          instaceDataTestId: T,
          className: M(c, t.menuItemIcon)
        }
      );
    if (y.isValidElement(r)) {
      const m = y.cloneElement(r, { selected: s });
      if (Q(m)) {
        if (c === t.startAdornment)
          return /* @__PURE__ */ o(B, { ownerState: { ...e }, children: m });
        if (c === t.endAdornment)
          return /* @__PURE__ */ o(F, { ownerState: { ...e }, children: m });
      }
      return m;
    }
    return null;
  }, [e, n, d, s]);
  if (C)
    return /* @__PURE__ */ o(
      G,
      {
        "data-testid": "SkeletonMenuItem",
        width: E,
        ownerState: { ...e },
        className: t.skeletonMenuItem
      }
    );
  const j = `${L}/${R}/frontend/components/menu_item/checked.svg`;
  return /* @__PURE__ */ h(
    H,
    {
      ...N,
      value: z,
      ownerState: { ...e },
      disabled: d,
      disableRipple: !0,
      selected: s,
      size: n,
      className: M(D, t.root),
      "data-testid": x || "MenuItemRoot",
      children: [
        i && /* @__PURE__ */ o(
          J,
          {
            src: j,
            size: n,
            ownerState: { ...e },
            disabled: d
          }
        ),
        f(W, "MenuItemStartIcon", t.startAdornment),
        /* @__PURE__ */ h(K, { ownerState: { ...e }, className: t.menuItemLabelWrapper, children: [
          /* @__PURE__ */ o(
            O,
            {
              ownerState: { ...e },
              variant: e.hasDescription ? "bodyDens" : "bodyStandard",
              size: n,
              "data-testid": "MenuItemLabel",
              children: w
            }
          ),
          e.hasDescription ? /* @__PURE__ */ o(
            P,
            {
              ownerState: { ...e },
              variant: "bodyStandard",
              size: n,
              "data-testid": "MenuItemDescription",
              className: t.menuItemDescription,
              color: "text.secondary",
              children: a
            }
          ) : null
        ] }),
        f(_, "MenuItemEndIcon", t.endAdornment)
      ]
    }
  );
};
export {
  de as MenuItem
};
