import MuiAutocomplete, { autocompleteClasses, } from '@mui/material/Autocomplete';
import { formControlClasses } from '@mui/material/FormControl';
import { iconButtonClasses } from '@mui/material/IconButton';
import { inputBaseClasses } from '@mui/material/InputBase';
import { MenuItem } from '../MenuItem';
import { svgIconClassnames } from '../SvgIcon';
import { styled } from '../styled';
import { autocompleteClassnames, INPUT_MIN_WIDTH } from './constants';
export const StyledMenuItem = styled(MenuItem) `
    max-height: ${({ theme }) => theme.spacing(13)};

    ${({ theme }) => theme.breakpoints.down('sm')} {
        max-height: unset;
    }
`;
export const StyledAutocomplete = styled(MuiAutocomplete) `
    ${({ loading }) => {
    return (loading &&
        `&& .${formControlClasses.root} .${inputBaseClasses.adornedEnd} .${svgIconClassnames.root} {
        width: 100%;
        height: 100%;
      }`);
}}
  
  & .${autocompleteClasses.endAdornment} .${iconButtonClasses.root}:hover {
      background-color: ${({ loading, theme }) => (loading ? 'transparent' : theme.palette.grey[100])};
  }

  &:not(.${autocompleteClassnames.emptyValue}) .${inputBaseClasses.root} {
    gap: ${({ theme }) => theme.spacing(3)};
  }

  & .${autocompleteClasses.inputRoot} .${inputBaseClasses.input} {
    min-width: ${INPUT_MIN_WIDTH}px;
  }

  & .${autocompleteClasses.inputRoot} {
    flex-wrap: nowrap;
  }
    
`;
