import { paginationItemClasses, type PaginationProps } from '@mui/material';
import type { Components } from '@mui/material/styles';

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

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

const sizes = {
  xSmall: xSmallSize,
  small: smallSize,
  medium: mediumSize,
  large: largeSize,
};
export default function MuiPagination(): Components['MuiPagination'] {
  return {
    defaultProps: {
      shape: SHAPE_ROUNDED,
      color: 'neutral',
    },
    variants: [
      ...[SIZE_X_SMALL, SIZE_SMALL, SIZE_MEDIUM, SIZE_LARGE].map((size$) => ({
        props: { size: size$ as PaginationProps['size'] },
        style: {
          [` .${paginationItemClasses.root}`]: {
            fontSize: fontSizes[size$ as keyof typeof fontSizes],
            minWidth: sizes[size$ as keyof typeof sizes],
            height: sizes[size$ as keyof typeof sizes],
          },
        },
      })),
    ],
    styleOverrides: {
      root: {
        [` .${paginationItemClasses.root}`]: {
          fontSize: fontSizes.medium,
          minWidth: sizes.medium,
          height: sizes.medium,
        },
      },
    },
  };
}
