import type { Theme } from '@mui/material';
import { buttonClasses } 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';
import { SHAPE_CIRCULAR, SHAPE_SQUARE, SIZE_MEDIUM } from '@/mui/constants';

const paddingYXSmall = 4;
const paddingXXSmall = 10;

const paddingYSmall = 4;
const paddingXSmall = 12;

const paddingYMedium = 6;
const paddingXMedium = 16;

const paddingYLarge = 8;
const paddingXLarge = 16;

export default function MuiButton(theme: Theme): Components['MuiButton'] {
  return {
    defaultProps: {
      size: SIZE_MEDIUM,
      color: 'primary',
      variant: 'contained',
    },
    variants: [
      {
        props: { square: true },
        style: {
          aspectRatio: '1 / 1',
          minWidth: 'auto',
          padding: 0,
        },
      },
      {
        props: { shape: SHAPE_SQUARE },
        style: {
          borderRadius: 0,
        },
      },
      {
        props: { shape: SHAPE_CIRCULAR },
        style: {
          borderRadius: theme.shape.borderRadiusCircular,
        },
      },
    ],
    styleOverrides: {
      root: {
        fontSize: fontSizeMedium,
        height: 'auto',
        whiteSpace: 'nowrap',
        textTransform: 'none',
        flexShrink: 0,
        gap: theme.spacing(1),

        [`.${buttonClasses.startIcon}`]: {
          margin: 0,
        },
        [`.${buttonClasses.endIcon}`]: {
          margin: 0,
        },
      },
      contained: {
        '&:hover': {
          boxShadow: theme.shadows[7],
        },
      },
      disableElevation: {
        boxShadow: theme.shadows[0],
        '&:hover': {
          boxShadow: theme.shadows[0],
        },
      },
      startIcon: {
        '& > *:nth-of-type(1)': {
          fontSize: 'inherit',
        },
      },
      endIcon: {
        '& > *:nth-of-type(1)': {
          fontSize: 'inherit',
        },
      },
      iconSizeLarge: {
        fontSize: iconSizeLarge,
      },
      iconSizeMedium: {
        fontSize: iconSizeMedium,
      },
      iconSizeSmall: {
        fontSize: iconSizeSmall,
      },
      iconSizeXSmall: {
        fontSize: iconSizeXSmall,
      },
      sizeLarge: {
        minWidth: 64,
        minHeight: largeSize,
        padding: `${paddingYLarge}px ${paddingXLarge}px`,
        fontSize: fontSizeLarge,
        lineHeight: '26px',
      },
      sizeMedium: {
        minWidth: 56,
        minHeight: mediumSize,
        padding: `${paddingYMedium}px ${paddingXMedium}px`,
        fontSize: fontSizeMedium,
        lineHeight: '24px',
      },
      sizeSmall: {
        minWidth: 40,
        minHeight: smallSize,
        padding: `${paddingYSmall}px ${paddingXSmall}px`,
        fontSize: fontSizeSmall,
        lineHeight: '22px',
      },
      sizeXSmall: {
        minWidth: 32,
        minHeight: xSmallSize,
        padding: `${paddingYXSmall}px ${paddingXXSmall}px`,
        fontSize: fontSizeXSmall,
        lineHeight: '13px',
      },
      outlinedSizeLarge: {
        padding: `${paddingYLarge - 1}px ${paddingXLarge - 1}px`,
      },
      outlinedSizeMedium: {
        padding: `${paddingYMedium - 1}px ${paddingXMedium - 1}px`,
      },
      outlinedSizeSmall: {
        padding: `${paddingYSmall - 1}px ${paddingXSmall - 1}px`,
      },
      outlinedSizeXSmall: {
        padding: `${paddingYXSmall - 1}px ${paddingXXSmall - 1}px`,
      },
      containedNeutral: {
        color: theme.palette.shades[900],
        backgroundColor: theme.palette.shades[300],
        '&:hover': {
          backgroundColor: theme.palette.shades[400],
        },
      },
      outlinedNeutral: {
        color: theme.palette.shades[900],
        borderColor: theme.palette.shades[500],
        '&:hover': {
          color: theme.palette.shades[900],
          borderColor: theme.palette.shades[600],
          backgroundColor: theme.palette.action.hover,
        },
      },
      textNeutral: {
        color: theme.palette.shades[900],

        '&:hover': {
          backgroundColor: theme.palette.action.hover,
        },
      },
    },
  };
}
