import type { Theme } from '@mui/material';
import { svgIconClasses } from '@mui/material';
import type { Components } from '@mui/material/styles';

import {
  fontSizeLarge,
  fontSizeMedium,
  fontSizeSmall,
  fontSizeXSmall,
  iconSizeLarge,
  iconSizeMedium,
  iconSizeSmall,
  iconSizeXSmall,
  largeSize,
  mediumSize,
  smallSize,
  xSmallSize,
} from '@/mui/components/constants';

export default function MuiToggleButton(theme: Theme): Components['MuiToggleButton'] {
  return {
    defaultProps: {
      color: 'primary',
    },
    styleOverrides: {
      root: {
        textTransform: 'none',
        paddingLeft: theme.spacing(3),
        paddingRight: theme.spacing(3),
      },
      sizeXSmall: {
        fontSize: fontSizeXSmall,
        minWidth: xSmallSize,
        height: xSmallSize,
        paddingLeft: theme.spacing(2),
        paddingRight: theme.spacing(2),

        [`.${svgIconClasses.root}`]: {
          fontSize: iconSizeXSmall,
        },
      },
      sizeSmall: {
        fontSize: fontSizeSmall,
        minWidth: smallSize,
        height: smallSize,

        [`.${svgIconClasses.root}`]: {
          fontSize: iconSizeSmall,
        },
      },
      sizeMedium: {
        fontSize: fontSizeMedium,
        minWidth: mediumSize,
        height: mediumSize,

        [`.${svgIconClasses.root}`]: {
          fontSize: iconSizeMedium,
        },
      },
      sizeLarge: {
        fontSize: fontSizeLarge,
        minWidth: largeSize,
        height: largeSize,

        [`.${svgIconClasses.root}`]: {
          fontSize: iconSizeLarge,
        },
      },
    },
  };
}
