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 x = {
  /**
   * Styles for the Select component.
   */
  root: ({ theme: r, ownerState: e }) => {
    const o = s(r, !!e?.error);
    return {
      [`&.${t.root}`]: {
        width: "100%",
        borderRadius: r.vars.size.borderRadius["r1-5"],
        border: r.vars.size.borderStroke.actionInput,
        borderColor: o.borderColor,
        padding: 0,
        cursor: e?.readOnly || e?.disabled ? "default" : "pointer",
        ...e?.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"])': {
          ...(e?.variant === "contained" || e?.variant === "outlined") && {
            border: `1px solid ${o.focusBorderColor}`
          },
          ...e?.variant === "text" ? {
            boxShadow: `0px 1.5px 0px 0px ${o.focusRingColor} !important`,
            borderBottom: `1px solid ${o.focusBorderColor}`
          } : {
            boxShadow: `0px 0px 0px 1.5px ${o.focusRingColor} !important`
          }
        },
        "& .M4LImage-root": {
          ...d(
            r.generalSettings.isMobile,
            e?.size || "medium",
            "base",
            (i) => ({
              height: i,
              width: i
            })
          )
        },
        "& .MuiSelect-select": {
          padding: `${r.vars.size.baseSpacings.sp1}!important`,
          minHeight: "unset",
          maxHeight: "80px",
          overflow: "auto",
          boxSizing: "border-box",
          display: "flex",
          flexDirection: "column",
          flexWrap: "unset",
          ...e?.readOnly && {
            cursor: "default"
          }
        },
        // Text variant styles
        [`&&&.${t.text}`]: {
          borderTop: 0,
          borderRight: 0,
          borderLeft: 0,
          borderRadius: "unset"
        },
        // Contained variant styles
        [`&&&.${t.contained}`]: {
          backgroundColor: e?.error ? r.vars.palette.error.enabledOpacity : r.vars.palette.default.enabledOpacity,
          borderColor: "transparent",
          "&:hover": {
            backgroundColor: e?.error ? r.vars.palette.error.hoverOpacity : r.vars.palette.default.hoverOpacity
          }
          // '&:focus-within': {
          //   backgroundColor: theme.vars.palette.background.default,
          //   borderColor: ownerState?.error ? theme.vars.palette.error.enabled : theme.vars.palette.primary.enabled,
          // },
        },
        "&:hover": {
          backgroundColor: e?.disabled ? "unset" : o.hoverBackgroundColor,
          borderColor: e?.disabled ? void 0 : o.hoverBorderColor
        },
        '&[aria-hidden="true"]': {
          pointerEvents: "none"
        },
        // Component size
        ...n(
          r,
          e?.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: r, ownerState: e }) => ({
    display: "flex",
    alignItems: "center",
    gap: r.vars.size.baseSpacings.sp1,
    overflow: "auto",
    flexShrink: 1,
    ...e?.multiple && {
      flexWrap: "wrap"
    }
  }),
  arrowDown: ({ theme: r, ownerState: e }) => ({
    ...p(r, e?.size)
  }),
  /**
   * Styles for the render value typography
   */
  renderValueTypography: ({ ownerState: r }) => ({
    cursor: r?.readOnly || r?.disabled ? "default" : "pointer",
    ...!r?.multiple && a()
  }),
  // chip: () => ({
  // }),
  /**
   * Styles for the label option
   */
  labelOption: ({ theme: r }) => ({
    paddingLeft: r.vars.size.baseSpacings.sp1,
    paddingRight: r.vars.size.baseSpacings.sp3
  }),
  /**
   * Styles for the label placeholder
   * @returns {object} The styles for the label placeholder
   */
  labelPlaceholer: ({ theme: r, ownerState: e }) => ({
    paddingLeft: r.vars.size.baseSpacings.sp1,
    paddingRight: r.vars.size.baseSpacings.sp3,
    cursor: e?.readOnly || e?.disabled ? "default" : "pointer",
    ...!e?.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: r,
    menuPaperMinWidth: e
  }) => ({
    "&": {
      "& .MuiPaper-root": {
        backgroundColor: r.vars.palette.background.default,
        marginTop: r.vars.size.baseSpacings.sp1,
        padding: r.vars.size.baseSpacings.sp3,
        boxShadow: r.vars.customShadows.z4,
        maxHeight: "200px",
        overflow: "auto",
        ...e ? {
          minWidth: `${e}px!important`
        } : {},
        "& .MuiList-root": {
          padding: 0,
          display: "grid",
          gridTemplateColumns: "auto",
          gap: r.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: r, ownerState: e }) => ({
    width: "100%",
    borderRadius: r.vars.size.borderRadius["r1-5"],
    display: "flex",
    alignItems: "center",
    background: r.vars.palette.skeleton.default,
    // Estilos específicos para el tamaño small
    ...n(
      r,
      e?.size || "medium",
      "action",
      (o) => ({
        minHeight: `${o}!important`
      })
    )
  })
};
export {
  x as selectStyles
};
