import makeStyles from '@mui/styles/makeStyles';
import type { Theme } from '../../@styles/theme-provider';
import type { AutocompleteProps } from './types';

type CreateClassesProps = Omit<AutocompleteProps, 'handleMenuClick' | 'options'>;

const createClasses = makeStyles<Theme, CreateClassesProps>(theme => ({
  root: {
    // hide dropdown
    '& + .MuiAutocomplete-popperDisablePortal': {
      display: 'none'
    },
    // end delete icon
    '& .MuiAutocomplete-endAdornment': {
      height: '100%'
    },
    '& $removeInputPadding, & $hasStringInputValue': {
      paddingRight: `${theme.spacing(2)} !important`
    }
  },
  // chips container
  inputRoot: props => {
    const { size } = props;
    const inputHeight = theme.spacing(size === 'small' ? 4 : 5);
    const spacing = size === 'small' ? 0.5 : 1;
    return {
      minHeight: inputHeight,
      paddingTop: `${theme.spacing(spacing)} !important`,
      paddingLeft: `${theme.spacing(spacing)} !important`,
      paddingBottom: `${theme.spacing(spacing - 0.5)} !important`
    };
  },
  hasStringInputValue: {},
  removeInputPadding: {},
  // input field
  multiple: {
    ...theme.typography.interactive2,
    '&:not(:first-of-type)': {
      minWidth: theme.spacing(10),
      paddingLeft: `${theme.spacing(1)} !important`,
      '&$small': {
        marginTop: theme.spacing(-0.5),
        marginBottom: 0
      },
      '&$medium': {
        marginTop: theme.spacing(-1),
        marginBottom: theme.spacing(-0.5)
      }
    }
  },
  small: {
    '& .MuiAutocomplete-inputRoot': {
      minHeight: theme.spacing(4),
      '& .MuiAutocomplete-input': {
        maxHeight: 0
      }
    }
  },
  medium: {
    '& .MuiAutocomplete-inputRoot': {
      minHeight: theme.spacing(5),
      '& .MuiAutocomplete-input': {
        maxHeight: 0
      }
    }
  },
  hideInput: {
    position: 'absolute',
    visibility: 'hidden'
  },
  // dropdown
  highlight: {
    color: theme.palette.secondary[500],
    backgroundColor: 'inherit'
  },
  // chip
  chipRoot: {
    border: `1px solid ${theme.palette.secondary[100]}`
  },
  chipStatusError: {
    backgroundColor: theme.palette.common.white,
    borderColor: theme.palette.error[500]
  },
  flexWrapInput: {
    '& > .MuiFormControl-root > .MuiInputBase-root': {
      flexWrap: 'wrap'
    }
  },
  placeholderMargin: {
    '& .MuiAutocomplete-inputRoot': {
      '& .MuiAutocomplete-input': {
        marginBottom: theme.spacing(0.5)
      }
    }
  },
  // buttons
  inputEndAdornment: {
    margin: 0
  },
  clearButton: {
    color: theme.palette.primary[200],
    '&:hover': {
      color: theme.palette.primary[300]
    }
  },
  searchButton: {
    marginLeft: theme.spacing(1),
    marginRight: 0,
    padding: 0,
    color: theme.palette.primary[400]
  }
}));

export default createClasses;