import { keyframes as e } from "@emotion/react";
import { getSizeStyles as r } from "../../../../utils/getSizeStyles/getSizeStyles.js";
import { AUTOCOMPLETE_CLASSES as s } from "./constants.js";
import { getInputAlignmentIconButtonOverrides as o } from "../../../../utils/getInputAlignmentIconButtonOverrides/getInputAlignmentIconButtonOverrides.js";
const n = e`
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
`, c = {
  /**
   * Styles for the root component.
   */
  root: ({ theme: a, ownerState: t }) => ({
    width: "100%",
    padding: 0,
    "& .M4LImage-root": {
      width: a.vars.size.baseSpacings["sp3-5"],
      height: a.vars.size.baseSpacings["sp3-5"]
    },
    "& .MuiInputBase-input": {
      ...t?.multiple && {
        gridArea: "c",
        marginTop: a.vars.size.baseSpacings.sp1,
        marginBottom: a.vars.size.baseSpacings.sp1
      },
      "&::placeholder": {
        color: a.vars.palette.text.disabled,
        opacity: 1
      }
    }
  }),
  /**
   * Styles for the icon button component.
   */
  iconButton: ({ theme: a, ownerState: t }) => ({
    ...o(a, t?.size),
    ...t?.readOnly && {
      "&:hover": {
        backgroundColor: "unset!important"
      },
      "&:active": {
        backgroundColor: "unset!important"
      },
      "&:focus-visible": {
        backgroundColor: "unset!important",
        outline: "none!important"
      }
    },
    // Animación de rotación para el botón de refresh
    [`&.${s.refreshRotating}`]: {
      "& .M4LIcon-icon": {
        animation: `${n} 0.6s ease-in-out`
      }
    }
  }),
  /**
   * Styles for the input component.
   */
  adorments: ({ ownerState: a }) => ({
    display: "flex",
    alignItems: "center",
    ...a?.multiple && {
      gridArea: "d"
    }
  }),
  /**
   * Styles for the typography component.
   */
  typography: {},
  menuList: {},
  /**
   * Styles for the menu item component.
   */
  menuItem: ({ theme: a }) => ({
    padding: `${a.vars.size.baseSpacings.sp1}!important`,
    borderRadius: `${a.vars.size.borderRadius.r0}!important`
  }),
  /**
   * Styles for the image component.
   */
  image: ({ theme: a }) => ({
    width: `${a.vars.size.baseSpacings.sp4} !important`,
    height: `${a.vars.size.baseSpacings.sp4} !important`
  }),
  /**
   * Styles for the chip component.
   */
  chip: ({ theme: a, ownerState: t }) => ({
    ...t?.disabled && {
      background: a.vars.palette.chips.disabled.contained.backgroundColor,
      color: a.vars.palette.text.disabled,
      "&& .M4LIcon-icon": {
        backgroundColor: `${a.vars.palette.text.disabled} !important`
      }
    }
  }),
  /**
   * Styles for the text field component.
   */
  textField: ({ theme: a, ownerState: t }) => ({
    height: "auto !important",
    position: "relative",
    "&& .MuiInputBase-root": {
      gap: a.vars.size.baseSpacings.sp1,
      ...t?.multiple && {
        gap: "unset",
        display: "grid",
        columnGap: a.vars.size.baseSpacings.sp1,
        gridTemplateColumns: "auto 1fr auto",
        gridTemplateAreas: t?.hasChips ? `"a b d"
             "a c d"` : `"a c d"
             "a c d"`
      },
      "&& > input": {
        width: "100%",
        textOverflow: "ellipsis",
        whiteSpace: "nowrap",
        overflow: "hidden!important"
      }
    }
  }),
  /**
   * Styles for the popper component.
   */
  popper: ({ theme: a }) => ({
    width: "fit-content!important",
    maxWidth: "calc(100vw - 20px)",
    "& .MuiPaper-root": {
      minWidth: "100%",
      padding: a.vars.size.baseSpacings.sp3,
      backgroundColor: a.vars.palette.background.default,
      boxShadow: a.vars.customShadows.z4,
      maxHeight: "200px",
      "& .MuiAutocomplete-listbox": {
        display: "grid",
        gridTemplateColumns: "auto",
        height: "fit-content",
        gap: a.vars.size.baseSpacings.sp1,
        maxHeight: "fit-content",
        minHeight: "fit-content",
        alignContent: "start",
        padding: 0,
        "& .M4LMenuItem-root ": {
          width: "100%",
          flexShrink: 0,
          "& .M4LTypography-root": {
            width: "fit-content",
            overflow: "unset"
          }
        }
      }
    }
  }),
  /**
   * styles for the circular progress component.
   */
  circularProgress: {},
  /**
   * Styles for the skeleton autocomplete component.
   */
  skeletonAutocomplete: ({ theme: a, ownerState: t }) => ({
    width: "100%",
    background: a.vars.palette.skeleton.default,
    display: "flex",
    borderRadius: a.vars.size.borderRadius.r1,
    ...r(
      a,
      t?.size || "medium",
      "action",
      (i) => ({ minHeight: i })
    )
  }),
  renderInputText: {},
  /**
   * Styles for the container multiple values component.
   */
  containerMultipleValues: ({ theme: a, ownerState: t }) => ({
    display: "flex",
    overflow: "auto",
    width: "100%",
    flex: 1,
    maxHeight: "80px",
    marginTop: a.vars.size.baseSpacings.sp1,
    marginBottom: a.vars.size.baseSpacings.sp1,
    ...t?.multiple && {
      gridArea: "b"
    }
  }),
  /**
   * Styles for the container wrapper component.
   */
  containerWrapper: ({ theme: a }) => ({
    display: "flex",
    flexWrap: "wrap",
    gap: a.vars.size.baseSpacings.sp1
  }),
  /**
   * Styles for the start adornment root (single root when combining external adornment + chips).
   * Prevents Fragment from receiving input props (size, ownerState).
   */
  startAdornmentRoot: () => ({
    display: "contents"
  }),
  /**
   * Styles for the wrapper start adornment component.
   */
  wrapperStartAdornment: ({ theme: a, ownerState: t }) => ({
    width: "fit-content",
    ...t?.multiple && {
      gridArea: "a"
    },
    display: "flex",
    gap: a.vars.size.baseSpacings.sp3,
    justifyContent: "center",
    alignItems: "center"
  }),
  /**
   * Styles for the wrapper end adornment component.
   */
  wrapperEndAdornment: ({ theme: a }) => ({
    marginRight: a.vars.size.baseSpacings.sp3
  })
};
export {
  c as autocompleteSyles
};
