import { Theme, toggleButtonClasses, toggleButtonGroupClasses } from '@mui/material';
import type { Components } from '@mui/material/styles';

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

export default function MuiToggleButtonGroup(theme: Theme): Components['MuiToggleButtonGroup'] {
  return {
    defaultProps: {
      color: 'primary',
    },
    variants: [
      {
        props: { equalWidth: true },
        style: {
          display: 'inline-grid',
          gridAutoFlow: 'column',
          gridAutoColumns: '1fr',
          [`& .${toggleButtonClasses.root}`]: {
            minWidth: 'max-content',
          },
        },
      },
      {
        props: { shape: SHAPE_SQUARE },
        style: {
          borderRadius: 0,
          [`& .${toggleButtonGroupClasses.firstButton}`]: {
            borderTopLeftRadius: 0,
            borderBottomLeftRadius: 0,
          },
          [`& .${toggleButtonGroupClasses.lastButton}`]: {
            borderTopRightRadius: 0,
            borderBottomRightRadius: 0,
          },
        },
      },
      {
        props: { shape: SHAPE_CIRCULAR },
        style: {
          borderRadius: theme.shape.borderRadiusCircular,
          [`& .${toggleButtonGroupClasses.firstButton}`]: {
            borderTopLeftRadius: theme.shape.borderRadiusCircular,
            borderBottomLeftRadius: theme.shape.borderRadiusCircular,
          },
          [`& .${toggleButtonGroupClasses.lastButton}`]: {
            borderTopRightRadius: theme.shape.borderRadiusCircular,
            borderBottomRightRadius: theme.shape.borderRadiusCircular,
          },
        },
      },
      ...colorList.map((key) => ({
        props: {
          color: key,
        },
        style: {
          [`& .${toggleButtonClasses.root}`]: {
            [`&.${toggleButtonClasses.selected}`]: {
              color: theme.palette[key].contrastText,
              backgroundColor: theme.palette[key].main,

              '&:hover': {
                backgroundColor: theme.palette[key].dark,
              },
            },
          },
        },
      })),
      {
        props: {
          color: 'neutral',
        },
        style: {
          [`& .${toggleButtonClasses.root}`]: {
            [`&.${toggleButtonClasses.selected}`]: {
              color: theme.palette.shades[900],
              backgroundColor: theme.palette.shades[300],

              '&:hover': {
                backgroundColor: theme.palette.shades[400],
              },
            },
          },
        },
      },
    ],
  };
}
