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

import { SHAPE_CIRCULAR, SHAPE_SQUARE } from '@/mui/constants';

export default function MuiButtonGroup(theme: Theme): Components['MuiButtonGroup'] {
  return {
    variants: [
      {
        props: { shape: SHAPE_SQUARE },
        style: {
          borderRadius: 0,
          [`& .${buttonGroupClasses.middleButton}`]: {
            borderRadius: 0,
          },
          [`& .${buttonGroupClasses.firstButton}`]: {
            borderTopLeftRadius: 0,
            borderBottomLeftRadius: 0,
          },
          [`& .${buttonGroupClasses.lastButton}`]: {
            borderTopRightRadius: 0,
            borderBottomRightRadius: 0,
          },
        },
      },
      {
        props: { shape: SHAPE_CIRCULAR },
        style: {
          borderRadius: theme.shape.borderRadiusCircular,
          [`& .${buttonGroupClasses.middleButton}`]: {
            borderRadius: 0,
          },
          [`& .${buttonGroupClasses.firstButton}`]: {
            borderTopLeftRadius: theme.shape.borderRadiusCircular,
            borderBottomLeftRadius: theme.shape.borderRadiusCircular,
          },
          [`& .${buttonGroupClasses.lastButton}`]: {
            borderTopRightRadius: theme.shape.borderRadiusCircular,
            borderBottomRightRadius: theme.shape.borderRadiusCircular,
          },
        },
      },
    ],
    styleOverrides: {
      grouped: {
        minWidth: 0,
        flexShrink: 1,
      },
    },
  };
}
