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

type CreateClassesProps = Pick<DonutProps, 'size' | 'title'>;

const createClasses = makeStyles<Theme, CreateClassesProps>(theme => ({
  textContainer: {
    position: 'absolute',
    maxWidth: '92px',
    textAlign: 'center',
    wordBreak: 'break-word'
  },
  title: props => {
    const { size, title } = props;
    const getFontSize = () => {
      if (typeof title === 'string' && title?.length >= 7) {
        if (size === 'xsmall') {
          return {
            ...theme.typography.h5,
            fontSize: theme.spacing(1.5)
          };
        }
        if (size === 'small') {
          return theme.typography.h4;
        }
        if (size === 'large') {
          return { ...theme.typography.h3, fontSize: theme.spacing(2) };
        }
      }
      return size === 'xsmall' ? theme.typography.h3 : theme.typography.h2;
    };

    return {
      ...getFontSize(),
      marginBottom: theme.spacing(0),
      color: theme.palette.primary[600]
    };
  },
  subtitle: {
    ...theme.typography.caption1,
    color: theme.palette.primary[400]
  }
}));

export default createClasses;