import makeStyles from '@mui/styles/makeStyles';
import { spacing } from '../definitions';
import type { Theme } from '../../types';

export interface CreateClassesProps {
  palette: Theme['palette'];
}

const createClasses = makeStyles<Theme, CreateClassesProps>(() => {
  return {
    root: ({ palette }) => ({
      pointerEvents: 'none',
      width: '16px',
      height: '16px',
      borderWidth: '1px',
      borderStyle: 'solid',
      borderRadius: spacing(0.5),
      borderColor: palette.primary[200],
      backgroundColor: palette.common.white,
      zIndex: 1,
      color: palette.common.white,
      '&:hover': {
        borderColor: palette.secondary[500]
      }
    }),
    checked: ({ palette }) => ({
      backgroundColor: palette.secondary[500],
      borderColor: palette.secondary[500]
    }),
    disabled: ({ palette }) => ({
      borderColor: palette.secondary[200]
    }),
    checkedDisabled: ({ palette }) => ({
      borderColor: palette.secondary[200],
      backgroundColor: palette.error.main
    }),
    indeterminate: ({ palette }) => ({
      color: palette.secondary[500],
      borderColor: palette.secondary[500]
    })
  };
});

export default createClasses;