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

const createClasses = makeStyles<
  Theme,
  { isValue?: boolean },
  | 'inputBaseRoot'
  | 'truncatedText'
  | 'clearButton'
  | 'selectMenu'
  | 'select'
  | 'labelRoot'
  | 'menuItem'
  | 'chipsContainer'
>(theme => ({
  inputBaseRoot: {},
  truncatedText: {
    lineHeight: theme.spacing(3),
    margin: theme.spacing(-0.5, 0),
    '& .overflowLabel:not(:empty)': {
      ...theme.typography.caption1,
      backgroundColor: theme.palette.secondary[500],
      borderRadius: theme.spacing(0.5),
      color: theme.palette.common.white,
      padding: theme.spacing(0, 0.5),
      minWidth: theme.spacing(3),
      height: theme.spacing(3),
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center'
    }
  },
  clearButton: {
    float: 'right',
    color: theme.palette.primary[200],
    marginLeft: theme.spacing(1),
    '&:hover': {
      color: theme.palette.primary[300]
    }
  },
  selectMenu: {
    // Mui menu jumps to top left corner during transition, so its turned off
    transition: 'unset !important'
  },
  select: props => {
    const { isValue } = props;
    return {
      color: theme.palette.primary[isValue ? 500 : 400]
    };
  },
  menuItem: {
    display: 'none'
  },
  chipsContainer: {
    overflow: 'hidden'
  },
  labelRoot: {
    ...theme.typography.h6
  }
}));

export default createClasses;