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

type CreateClassesProps = Pick<ClientImageProps, 'width'>;

const createClasses = makeStyles<Theme, CreateClassesProps>(theme => ({
  inputBaseRoot: ({ width }) => ({
    // input
    width,
    backgroundColor: theme.palette.secondary[100],
    '&:hover': {
      backgroundColor: theme.palette.secondary[200]
    },
    '&.Mui-focused': {
      backgroundColor: `${theme.palette.common.white} !important`
    },
    // icon
    '& .MuiSelect-icon': {
      top: theme.spacing(1.25),
      right: theme.spacing(1)
    },
    // fieldset
    '& fieldset': {
      borderColor: theme.palette.secondary[100]
    },
    '&:hover fieldset': {
      borderColor: `${theme.palette.secondary[200]} !important`,
      boxShadow: 'none'
    },
    '&.Mui-focused fieldset': {
      borderColor: `${theme.palette.secondary[500]} !important`,
      boxShadow: 'none'
    }
  }),
  select: ({ width }) => ({
    paddingTop: `${theme.spacing(1)} !important`,
    paddingBottom: `${theme.spacing(1)} !important`,
    paddingLeft: `${theme.spacing(1)} !important`,
    '& > .MuiGrid-root': {
      maxWidth: width ? width - 32 : undefined
    },
    '& .itemTitle': {
      ...theme.typography.interactive1
    }
  }),
  selectMenu: {
    width: 280,
    '& .buttonBottom': {
      color: theme.palette.secondary[500],
      height: theme.spacing(6),
      margin: theme.spacing(0.25, 0, 1),
      '& .MuiButton-startIcon': {
        fill: theme.palette.secondary[500]
      },
      '& > span.MuiTypography-root': {
        marginBottom: 0
      },
      '&:hover': {
        '& > span': {
          color: theme.palette.secondary[600],
          fill: theme.palette.secondary[600]
        }
      }
    }
  },
  menuItem: {
    height: theme.spacing(6.25),
    marginBottom: theme.spacing(0.25)
  },
  menuListSubheader: {
    height: theme.spacing(6.25)
  },
  itemTitle: {
    ...theme.typography.body2,
    color: theme.palette.primary[500],
    whiteSpace: 'normal',
    paddingBottom: theme.spacing(0.25)
  },
  itemSubtitle: {
    ...theme.typography.caption1,
    color: theme.palette.primary[400],
    display: 'block',
    textTransform: 'capitalize'
  },
  subClientPadding: {
    '& .MuiModal-root .MuiMenu-paper .simplebar-content > ul > li:nth-of-type(n+2)': {
      paddingLeft: theme.spacing(4)
    }
  }
}));

export default createClasses;