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

import {
  fontSizeLarge,
  fontSizeMedium,
  fontSizeSmall,
  fontSizeXSmall,
  largeSize,
  mediumSize,
  smallSize,
  xSmallSize,
} from '@/mui/components/constants';
import { SIZE_LARGE, SIZE_MEDIUM, SIZE_SMALL, SIZE_X_SMALL } from '@/mui/constants';

import { GeneralSizeProp } from '@/mui/types';

const fontSizes = {
  xSmall: fontSizeXSmall,
  small: fontSizeSmall,
  medium: fontSizeMedium,
  large: fontSizeLarge,
};

const sizes = {
  xSmall: xSmallSize,
  small: smallSize,
  medium: mediumSize,
  large: largeSize,
};

export default function MuiPaginationItem(theme: Theme): Components['MuiPaginationItem'] {
  return {
    defaultProps: {
      color: 'neutral',
    },
    variants: [
      ...[SIZE_X_SMALL, SIZE_SMALL, SIZE_MEDIUM, SIZE_LARGE].map((size$) => ({
        props: { size: size$ as GeneralSizeProp },
        style: {
          fontSize: fontSizes[size$ as keyof typeof fontSizes],
          minWidth: sizes[size$ as keyof typeof sizes],
          height: sizes[size$ as keyof typeof sizes],
        },
      })),
    ],
    styleOverrides: {
      root: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        fontSize: fontSizes.medium,
        minWidth: sizes.medium,
        height: sizes.medium,
      },
      textNeutral: {
        '&:hover': {
          backgroundColor: theme.palette.shades[200],
        },
        '&.Mui-selected': {
          color: theme.palette.shades[900],
          backgroundColor: theme.palette.shades[300],

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