import { getSingleLineInputLineHeight as l, getTypographyStyles as n } from "../../../../utils/getTypographyStyles.js";
import { getHeightSizeStyles as s, getSizeStyles as p } from "../../../../utils/getSizeStyles/getSizeStyles.js";
import { getSharedInputStateColors as u } from "../../../../utils/getSharedInputStateColors.js";
import { TEXT_FIELD_CLASSES as d } from "./constants.js";
function i() {
  return {
    WebkitBoxShadow: "0 0 0 1000px #20202000 inset !important",
    boxShadow: "0 0 0 1000px #20202000 inset !important"
  };
}
const a = (o, t) => o && o > 79 && o < 100 ? t.vars.palette.warning.semanticText : o === 100 ? t.vars.palette.chips.forest.outlined.colorTone : t.vars.palette.text.secondary, f = {
  /**
   * Estilos personalizados para el componente TextField.
   */
  root: ({ ownerState: o, theme: t }) => {
    const r = u(t, !!o?.error);
    return {
      width: "100%",
      height: "fit-content!important",
      minHeight: "fit-content!important",
      padding: 0,
      borderRadius: t.vars.size.borderRadius["r1-5"],
      display: "flex",
      overflow: "visible",
      "&&& .MuiInputBase-root": {
        // Positioning context so autofill input can fill the wrapper (inset: 0)
        position: "relative",
        width: "100%",
        backgroundColor: o?.variant === "contained" ? t.vars.palette.default.enabledOpacity : t.vars.palette.background.default,
        // Estilos globales del TextField 🌎
        // Paddings
        paddingLeft: t.vars.size.baseSpacings.sp1,
        paddingRight: 0,
        paddingTop: 0,
        paddingBottom: 0,
        overflow: "hidden",
        // Redondeado de los bordes
        borderRadius: t.vars.size.borderRadius["r1-5"],
        // Altura
        height: "100%",
        // transición
        transition: "all 0.2s ease",
        // Espaciado entre elementos
        ...p(
          t,
          o?.size || "medium",
          "action",
          (e) => ({
            height: "auto",
            minHeight: e
          })
        ),
        "& .MuiInputBase-input.MuiInputBase-inputMultiline": {
          paddingTop: t.vars.size.baseSpacings.sp1,
          paddingBottom: t.vars.size.baseSpacings.sp1
        },
        // Variant Outlined TextField
        ...o?.variant === "outlined" && {
          // Estilos de borde
          border: t.vars.size.borderStroke.actionInput,
          borderColor: r.borderColor,
          borderRadius: t.vars.size.borderRadius["r1-5"]
        },
        // Variant Text TextField
        ...o?.variant === "text" && {
          // Estilos de borde por el formato de variante, solo se aplica para borde inferior.
          borderBottom: t.vars.size.borderStroke.actionInput,
          borderColor: r.borderColor,
          borderRadius: 0
        },
        // Variant Contained TextField
        ...o?.variant === "contained" && {
          border: t.vars.size.borderStroke.actionInput,
          borderColor: r.borderColor,
          backgroundColor: t.vars.palette[o?.color || "default"][o?.error ? "toneOpacity" : "enabledOpacity"]
        },
        // state readOnly
        ...o?.readOnly && {
          backgroundColor: t.vars.palette.default.enabledOpacity,
          borderColor: `${r.borderColor}!important`,
          "& .MuiInputBase-input": {
            color: t.vars.palette.text.primary
          }
        },
        ...!o?.readOnly && {
          ...o?.error && {
            borderColor: r.borderColor
          },
          /* State hover */
          "&:hover": {
            backgroundColor: r.hoverBackgroundColor,
            borderColor: r.hoverBorderColor
          },
          /* State focus */
          "&:focus-within": {
            backgroundColor: o?.variant === "contained" ? t.vars.palette.default.enabledOpacity : t.vars.palette.background.default,
            borderColor: r.focusBorderColor,
            ...o?.variant === "text" ? {
              boxShadow: `0px 1.5px 0px 0px ${r.focusRingColor} !important`
            } : {
              boxShadow: `0px 0px 0px 1.5px ${r.focusRingColor} !important`
            }
          }
        }
      },
      // ↴ Overrides ❌
      // Estilos del input
      "& .MuiInputBase-input": {
        // ↴ Overrides ❌
        paddingLeft: t.vars.size.baseSpacings.sp1,
        paddingRight: t.vars.size.baseSpacings.sp1,
        paddingTop: 0,
        paddingBottom: 0,
        fontFamily: t.typography.fontFamily,
        color: o?.disabled ? t.vars.palette.text.disabled : t.vars.palette.text.primary,
        transition: "all 0.2s ease",
        ...n(
          t.generalSettings.isMobile,
          o?.size || "medium",
          "bodyStandard"
        ),
        "&::placeholder": {
          color: `${t.vars.palette.text.disabled}`,
          opacity: 1
        },
        "&:focus": {
          "&::placeholder": {
            color: `${t.vars.palette.text.primary}!important`
          }
        },
        "&::selection": {
          backgroundColor: t.vars.palette.primary.selectedOpacity,
          color: t.vars.palette.text.primary,
          WebkitTextFillColor: t.vars.palette.text.primary
        },
        // Autofill: solid inset fill matches field surface (transparent fails vs Chrome autofill paint)
        "&:-webkit-autofill, &:-webkit-autofill:hover, &:-webkit-autofill:focus, &:-webkit-autofill:active": {
          width: "100%",
          height: "100%",
          boxSizing: "border-box",
          color: `${t.vars.palette.text.primary} !important`,
          WebkitTextFillColor: `${t.vars.palette.text.primary} !important`,
          caretColor: t.vars.palette.text.primary,
          ...i(),
          transition: "background-color 5000s ease-in-out 0s"
        },
        "&:-moz-autofill, &:-moz-autofill-preview": {
          filter: "none",
          color: `${t.vars.palette.text.primary} !important`,
          caretColor: t.vars.palette.text.primary,
          ...i(),
          transition: "background-color 5000s ease-in-out 0s"
        },
        "&:autofill, &:autofill:hover, &:autofill:focus, &:autofill:active": {
          width: "100%",
          height: "100%",
          boxSizing: "border-box",
          color: `${t.vars.palette.text.primary} !important`,
          WebkitTextFillColor: `${t.vars.palette.text.primary} !important`,
          caretColor: t.vars.palette.text.primary,
          ...i(),
          transition: "background-color 5000s ease-in-out 0s"
        }
      },
      "& .MuiInputBase-input:not(.MuiInputBase-inputMultiline)": {
        ...l()
      },
      // Hover / focus: match `MuiInputBase-root` background so autofill overlay stays aligned with the field
      "&&& .MuiInputBase-root:hover:not(:focus-within) .MuiInputBase-input:-webkit-autofill, &&& .MuiInputBase-root:hover:not(:focus-within) .MuiInputBase-input:-webkit-autofill:hover, &&& .MuiInputBase-root:hover:not(:focus-within) .MuiInputBase-input:-webkit-autofill:focus, &&& .MuiInputBase-root:hover:not(:focus-within) .MuiInputBase-input:-webkit-autofill:active": {
        color: `${t.vars.palette.text.primary} !important`,
        WebkitTextFillColor: `${t.vars.palette.text.primary} !important`,
        caretColor: t.vars.palette.text.primary,
        ...i()
      },
      "&&& .MuiInputBase-root:focus-within .MuiInputBase-input:-webkit-autofill, &&& .MuiInputBase-root:focus-within .MuiInputBase-input:-webkit-autofill:hover, &&& .MuiInputBase-root:focus-within .MuiInputBase-input:-webkit-autofill:focus, &&& .MuiInputBase-root:focus-within .MuiInputBase-input:-webkit-autofill:active": {
        color: `${t.vars.palette.text.primary} !important`,
        WebkitTextFillColor: `${t.vars.palette.text.primary} !important`,
        caretColor: t.vars.palette.text.primary,
        ...i()
      },
      // Estilos de cuando esta deshabilitado
      ...o?.disabled && {
        borderColor: `${t.vars.palette.text.secondary}!important`,
        pointerEvents: o?.disabled ? "none" : "auto",
        "& .MuiInputAdornment-root .M4LIcon-icon": {
          backgroundColor: t.vars.palette.text.disabled
        }
      },
      // Estilos del los adorments
      "& .MuiInputAdornment-root": {
        height: "auto",
        width: "auto",
        // ↴ Overrides ❌
        margin: 0
      },
      // Estilos de la mascara fieldset, es un elemento interno del textfield, material lo usa como mascara para el estilo.
      // por practicidad se oculta en nuestra versión, sin embargo no se elimina porque es parte de la semántica del componente.
      "& .MuiOutlinedInput-notchedOutline": {
        all: "unset",
        display: "none"
      }
    };
  },
  /**
   * Estilos personalizados para el componente Skeleton.
   */
  skeleton: ({ ownerState: o, theme: t }) => ({
    [`&.${d.skeleton}`]: {
      display: "flex",
      borderRadius: t.vars.size.borderRadius["r1-5"],
      ...s(
        t.generalSettings.isMobile,
        o?.size || "medium",
        "action"
      )
    }
  }),
  /**
   * Estilos personalizados para el contenedor de limite de caracteres.
   */
  limitContainer: ({ theme: o }) => ({
    display: "flex",
    alignItems: "center",
    paddingLeft: o.vars.size.baseSpacings.sp1,
    paddingRight: o.vars.size.baseSpacings.sp1
  }),
  /**
   * Estilos personalizados para el texto de limite de caracteres.
   */
  limitTextFirst: ({ ownerState: o, theme: t }) => ({
    color: a(o?.percent || 0, t)
  }),
  /**
   * Estilos personalizados para el texto de limite de caracteres.
   */
  limitTextSeparator: ({ ownerState: o, theme: t }) => ({
    color: a(o?.percent || 0, t)
  }),
  /**
   * Estilos personalizados para el texto de limite de caracteres.
   */
  limitTextSecond: ({ ownerState: o, theme: t }) => ({
    color: a(o?.percent || 0, t)
  })
};
export {
  f as textFieldStyles
};
