import { jsxs as c, jsx as t } from "@emotion/react/jsx-runtime";
import y, { useId as z } from "react";
import C from "clsx";
import { TEST_PROP_ID as A } from "../../test/constants_no_mock.js";
import { TEST_PROPS_DATA as D, COMPONENT_PREFIX as x, PROPERTY_VALUE_KEY_COMPONENT as s } from "./constants.js";
import { getNameDataTestId as F, getPropDataTestId as M } from "../../test/getNameDataTestId.js";
import { Icon as W } from "@m4l/base";
import { PropertyValueRootStyled as $, ContainerStartAdornmentStyled as j, ContainerPropertyAndValueStyled as q, NameStyled as w, ValueStyled as L, TypographyValueStyled as Y } from "./slots/PropertyValueSlots.js";
import { getComponentSlotRoot as f } from "../../utils/getComponentSlotRoot.js";
import { getNullGuard as G } from "../../utils/getNullGuard.js";
import { Label as H } from "../Label/Label.js";
import { useComponentSize as J } from "@m4l/graphics";
function le(S) {
  const {
    property: l,
    startAdornment: o,
    value: e,
    className: h,
    isForm: n,
    dataTestId: m = "",
    disabled: p = !1,
    mandatory: P,
    mandatoryMessage: v,
    helperMessage: E,
    symbol: N,
    semanticWidth: a = "fullWidth",
    propertyWidth: T = 200,
    size: g = "medium",
    direction: u,
    valueHeight: I,
    iconVariant: V = "outlined",
    iconColor: O = "primary",
    borderStyle: _ = "none"
  } = S, d = `property-value-${z()}`, { currentSize: i } = J(g), r = {
    propertyWidth: T,
    disabled: n && p ? p : !1,
    isForm: !!n,
    semanticWidth: a,
    valueHeight: I,
    size: i,
    direction: n && u === void 0 ? "column" : u ?? "row",
    iconVariant: V,
    iconColor: O,
    borderStyle: _
  }, b = () => o ? typeof o == "string" ? /* @__PURE__ */ t(
    W,
    {
      src: o,
      color: "text.secondary"
    }
  ) : o : null, R = () => typeof e == "string" || typeof e == "number" || e === null || e === void 0 ? /* @__PURE__ */ t(Y, { id: d, size: i, variant: "bodyDens", ownerState: r, children: G(e) }) : y.isValidElement(e) ? y.cloneElement(e, { size: i, id: d }) : e;
  return /* @__PURE__ */ c(
    $,
    {
      role: n ? "property-value-form-role" : "property-value-role",
      className: C(
        f(s),
        a && `${f(s)}-semanticWidth-${a}`,
        h
      ),
      ...M(s, "root", m),
      ownerState: r,
      ...process.env.NODE_ENV !== "production" ? {
        [D]: JSON.stringify([{ property: !!l, value: !!e }]),
        [A]: F(x, "root", m)
      } : {},
      children: [
        o && /* @__PURE__ */ t(j, { ownerState: r, children: b() }),
        /* @__PURE__ */ c(q, { ownerState: r, children: [
          /* @__PURE__ */ t(w, { ownerState: r, children: l && /* @__PURE__ */ t(
            H,
            {
              size: i,
              label: l,
              mandatory: P,
              mandatoryMessage: v,
              helperMessage: E,
              symbol: N,
              htmlFor: d
            }
          ) }),
          /* @__PURE__ */ t(L, { role: "property-value-value-role", ownerState: r, children: R() })
        ] })
      ]
    }
  );
}
export {
  le as PropertyValue
};
