import { SELECT_CLASSES as t } from "./constants.js";
import { getSharedInputStateColors as s } from "../../../../utils/getSharedInputStateColors.js";
import { getSingleLineInputLineHeight as a } from "../../../../utils/getTypographyStyles.js";
import { getSizeStyles as n, getHeightSizeStyles as d } from "../../../../utils/getSizeStyles/getSizeStyles.js";
import { getInputAlignmentIconButtonOverrides as p } from "../../../../utils/getInputAlignmentIconButtonOverrides/getInputAlignmentIconButtonOverrides.js";
const b = {
  /**
   * Styles for the Select component.
   */
  root: ({ theme: e, ownerState: r }) => {
    const o = s(e, !!r?.error);
    return {
      [`&.${t.root}`]: {
        width: "100%",
        borderRadius: e.vars.size.borderRadius["r1-5"],
        border: e.vars.size.borderStroke.actionInput,
        borderColor: o.borderColor,
        padding: 0,
        cursor: r?.readOnly || r?.disabled ? "default" : "pointer",
        ...r?.readOnly && {
          "& .M4LSelect-renderValueTypography": {
            userSelect: "text",
            cursor: "text"
          }
        },
        "&&& .MuiInputBase-input": {
          paddingTop: "0px !important",
          paddingBottom: "0px !important"
        },
        "& .MuiSelect-nativeInput": {
          inset: 0,
          border: "unset",
          outline: "unset"
        },
        "& .MuiOutlinedInput-notchedOutline": {
          all: "unset",
          display: "none"
        },
        '&:has(.MuiSelect-select[aria-expanded="true"])': {
          borderColor: o.focusBorderColor,
          ...r?.variant === "text" ? {
            boxShadow: `0px 1.5px 0px 0px ${o.focusRingColor} !important`
          } : {
            boxShadow: `0px 0px 0px 1.5px ${o.focusRingColor} !important`
          }
        },
        "& .M4LImage-root": {
          ...d(
            e.generalSettings.isMobile,
            r?.size || "medium",
            "base",
            (i) => ({
              height: i,
              width: i
            })
          )
        },
        "& .MuiSelect-select": {
          padding: `${e.vars.size.baseSpacings.sp1}!important`,
          minHeight: "unset",
          maxHeight: "80px",
          overflow: "auto",
          boxSizing: "border-box",
          display: "flex",
          flexDirection: "column",
          flexWrap: "unset",
          ...r?.readOnly && {
            cursor: "default"
          }
        },
        // Estilos para la variante text
        [`&&&.${t.text}`]: {
          borderTop: 0,
          borderRight: 0,
          borderLeft: 0,
          borderRadius: "unset"
        },
        "&:hover": {
          backgroundColor: r?.disabled ? "unset" : o.hoverBackgroundColor,
          borderColor: r?.disabled ? void 0 : o.hoverBorderColor
        },
        "&:focus-within": {
          borderColor: o.focusBorderColor,
          ...r?.variant === "text" ? {
            boxShadow: `0px 1.5px 0px 0px ${o.focusRingColor} !important`
          } : {
            boxShadow: `0px 0px 0px 1.5px ${o.focusRingColor} !important`
          }
        },
        '&[aria-hidden="true"]': {
          pointerEvents: "none"
        },
        // Tamaño del componente
        ...n(
          e,
          r?.size || "medium",
          "action",
          (i) => ({
            minHeight: i,
            height: "fit-content",
            maxHeight: "80px"
          })
        )
      }
    };
  },
  /**
   * Styles for the row icon.
   */
  adorment: {},
  /**
   * Styles for the render option container
   * @returns {object} The styles for the render option container
   */
  renderValueContainer: ({ theme: e, ownerState: r }) => ({
    display: "flex",
    alignItems: "center",
    gap: e.vars.size.baseSpacings.sp1,
    overflow: "auto",
    flexShrink: 1,
    ...r?.multiple && {
      flexWrap: "wrap"
    }
  }),
  arrowDown: ({ theme: e, ownerState: r }) => ({
    ...p(e, r?.size)
  }),
  /**
   * Styles for the render value typography
   */
  renderValueTypography: ({ ownerState: e }) => ({
    cursor: e?.readOnly || e?.disabled ? "default" : "pointer",
    ...!e?.multiple && a()
  }),
  // chip: () => ({
  // }),
  /**
   * Styles for the label option
   */
  labelOption: ({ theme: e }) => ({
    paddingLeft: e.vars.size.baseSpacings.sp1,
    paddingRight: e.vars.size.baseSpacings.sp3
  }),
  /**
   * Styles for the label placeholder
   * @returns {object} The styles for the label placeholder
   */
  labelPlaceholer: ({ theme: e, ownerState: r }) => ({
    paddingLeft: e.vars.size.baseSpacings.sp1,
    paddingRight: e.vars.size.baseSpacings.sp3,
    cursor: r?.readOnly || r?.disabled ? "default" : "pointer",
    ...!r?.multiple && a()
  }),
  /**
   * Styles for the menu item select
   * @param {object} theme - The theme object
   * @returns {object} The styles for the menu item select
   */
  menuItem: {
    "& .M4LMenuItem-menuItemContainer": {
      width: "fit-content",
      overflow: "unset",
      "& .M4LImage-root": {
        flexGrow: 1,
        overflow: "auto",
        flexShrink: 0
      },
      "& .M4LTypography-root": {
        textOverflow: "unset",
        overflow: "unset",
        whiteSpace: "unset"
      }
    }
  },
  /**
   * Styles for the menu paper component
   * @param {object} theme - The theme object
   * @returns {object} The styles for the menu paper component
   */
  menuPaper: ({ theme: e, selectRef: r }) => ({
    "&": {
      "& .MuiPaper-root": {
        backgroundColor: e.vars.palette.background.default,
        marginTop: e.vars.size.baseSpacings.sp1,
        padding: e.vars.size.baseSpacings.sp3,
        boxShadow: e.vars.customShadows.z4,
        maxHeight: "200px",
        overflow: "auto",
        minWidth: `${(r?.current?.offsetWidth ?? 0) + 1}px!important`,
        // +1 para incluir el border del contenedor root.
        "& .MuiList-root": {
          padding: 0,
          display: "grid",
          gridTemplateColumns: "auto",
          gap: e.vars.size.baseSpacings.sp1,
          width: "fit-content!important",
          minWidth: "100%",
          "& .MuiMenuItem-root": {
            width: "100%"
          }
        }
      }
      // Estilos personalizados para el menú paper
      // El parámetro theme está disponible para uso futuro
      // Ejemplo: backgroundColor: _theme.vars.palette.background.paper,
    }
  }),
  /**
   * Estilos del menuItem que no tiene opciones
   * @param {object} theme - The theme object
   * @returns {object} The styles for the menu item select
   */
  menuItemNoOptions: {},
  /**
   * Styles for the skeleton select component
   */
  skeletonSelect: ({ theme: e, ownerState: r }) => ({
    width: "100%",
    borderRadius: e.vars.size.borderRadius["r1-5"],
    display: "flex",
    alignItems: "center",
    background: e.vars.palette.skeleton.default,
    // Estilos específicos para el tamaño small
    ...n(
      e,
      r?.size || "medium",
      "action",
      (o) => ({
        minHeight: `${o}!important`
      })
    )
  })
};
export {
  b as selectStyles
};
