import { jsx as n, jsxs as k } from "@emotion/react/jsx-runtime";
import { useModuleSkeleton as C } from "@m4l/core";
import O from "clsx";
import { useComponentSize as P } from "../../../../hooks/useComponentSize/index.js";
import { SkeletonStyled as N, TextFieldRootStyled as _, LimitContainerStyled as g, LimitTextFirstStyled as M, LimitTextSeparatorStyled as D, LimitTextSecondStyled as R } from "./slots/TextFieldSlots.js";
import { getPropDataTestId as p } from "../../../../test/getNameDataTestId.js";
import { TEXT_FIELD_CLASSES as a, TEXT_FIELD_KEY_COMPONENT as S } from "./constants.js";
import { TextFieldSlots as u } from "./slots/TextFieldEnum.js";
import { useTheme as j } from "@mui/material";
import f, { forwardRef as V, useMemo as x, cloneElement as y } from "react";
import { IconButton as X } from "../IconButton/IconButton.js";
const te = V(function(A, T) {
  const {
    value: d,
    dataTestId: l,
    variant: m = "outlined",
    size: h,
    disabled: i = !1,
    error: o,
    InputProps: e,
    autoComplete: E = "off",
    className: v,
    inputProps: z,
    maxLength: r,
    ...L
  } = A, { currentSize: t } = P(h), c = j(), b = o && c.vars.palette.error || c.vars.palette.primary, s = r ? d.length / r * 100 : 0, w = {
    size: t,
    disabled: i,
    paletteColor: b,
    variant: m,
    error: o,
    color: o ? "error" : "default",
    readOnly: e?.readOnly
  }, F = x(() => e?.startAdornment && f.isValidElement(e?.startAdornment) ? y(e?.startAdornment, {
    size: t
  }) : e?.startAdornment, [e?.startAdornment, t]), I = x(() => e?.endAdornment && f.isValidElement(e?.endAdornment) && e?.endAdornment.type === X ? y(e?.endAdornment, {
    size: t
  }) : e?.endAdornment, [e?.endAdornment, t]);
  return C() ? /* @__PURE__ */ n(
    N,
    {
      className: a.skeleton,
      ...p(S, u.skeleton, l),
      variant: "rounded",
      ownerState: { size: t }
    }
  ) : /* @__PURE__ */ n(
    _,
    {
      ref: T,
      className: O(a.root, a[m], v, e?.readOnly && a.readOnly),
      ...p(S, u.root, l),
      autoComplete: E,
      value: d,
      inputMode: "numeric",
      disabled: i,
      inputProps: {
        role: "textbox",
        "aria-invalid": o ? "true" : void 0,
        ...z
      },
      maxLength: r,
      InputProps: {
        ...e,
        startAdornment: F,
        endAdornment: I,
        ...r && {
          endAdornment: /* @__PURE__ */ k(g, { children: [
            /* @__PURE__ */ n(M, { size: t, role: "text", "aria-label": "current characters", variant: "bodyStandard", color: "text.secondary", ownerState: { percent: s }, children: d.length }),
            /* @__PURE__ */ n(D, { size: t, variant: "bodyStandard", color: "text.secondary", ownerState: { percent: s }, children: "/" }),
            /* @__PURE__ */ n(R, { size: t, role: "text", "aria-label": "limit characters", variant: "bodyStandard", color: "text.secondary", ownerState: { percent: s }, children: r }),
            e?.endAdornment
          ] })
        },
        disabled: i,
        type: e?.type || "text"
      },
      ...L,
      ownerState: { ...w }
    }
  );
});
export {
  te as TextField
};
