import { jsx as e, jsxs as z, Fragment as I } from "@emotion/react/jsx-runtime";
import { useEnvironment as L } from "@m4l/core";
import { InputAdornment as R } from "@mui/material";
import { useState as _ } from "react";
import { useFormContext as $, Controller as j } from "react-hook-form";
import { useComponentSize as H } from "../../../hooks/useComponentSize/index.js";
import { RHFTextFieldPasswordRoot as T, LabelStyled as A, TextFieldStyled as E, IconButtonStyled as M } from "./slots/RHFTextFieldPasswordSlots.js";
import { HelperError as V } from "../../HelperError/HelperError.js";
import { getLimitCharacters as k } from "../../../utils/getLimitCharacters/getLimitCharacters.js";
const U = (c) => {
  const {
    name: t,
    label: i,
    size: r,
    mandatory: f,
    mandatoryMessage: u,
    helperMessage: g,
    disabled: m,
    ...n
  } = c, [s, h] = _(!1), { currentSize: a } = H(r), w = a === "small" || a === "medium" ? a : "medium", { host_static_assets: l, environment_assets: d } = L(), { control: x } = $();
  return /* @__PURE__ */ e(T, { children: /* @__PURE__ */ e(
    j,
    {
      name: t,
      control: x,
      render: ({ field: { onChange: S, value: v, ref: C }, fieldState: { error: o }, formState: { isSubmitting: F } }) => {
        const y = (p) => {
          const b = n.maxLength ? k({ limitCharacters: n.maxLength, value: p.target.value }) : p.target.value, P = String(b || "");
          S(P);
        };
        return /* @__PURE__ */ z(I, { children: [
          i && /* @__PURE__ */ e(
            A,
            {
              ownerState: { error: !!o },
              size: w,
              label: i,
              htmlFor: t,
              mandatory: f,
              mandatoryMessage: u,
              helperMessage: g
            }
          ),
          /* @__PURE__ */ e(
            E,
            {
              ownerState: { error: !!o },
              name: t,
              id: t,
              type: s ? "text" : "password",
              size: r,
              error: !!o,
              disabled: m || F,
              inputProps: {
                role: "textbox",
                "aria-label": t,
                disabled: m,
                name: t,
                type: s ? "text" : "password"
              },
              InputProps: {
                /* InputAdornment: Componente de la librería externa material ui, permite agregar un elemento gráfico
                   personalizado dentro del campo de texto*/
                endAdornment: /* @__PURE__ */ e(R, { position: "end", children: /* @__PURE__ */ e(
                  M,
                  {
                    ownerState: { error: !!o },
                    onClick: () => h(!s),
                    icon: s ? `${l}/${d}/frontend/components/rhftextfieldpassword/assests/icons/view.svg` : `${l}/${d}/frontend/components/rhftextfieldpassword/assests/icons/view_off.svg`
                  }
                ) })
              },
              onChange: y,
              value: String(v || ""),
              inputRef: C,
              ...n
            }
          ),
          o?.message && /* @__PURE__ */ e(
            V,
            {
              message: o.message,
              size: r
            }
          )
        ] });
      }
    }
  ) });
};
export {
  U as RHFTextFieldPassword
};
