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

import { fontSizeSmall, largeSize, smallSize } from '@/mui/components/constants';

export default function MuiTableCell(theme: Theme): Components['MuiTableCell'] {
  return {
    styleOverrides: {
      root: {
        padding: theme.spacing(0, 3),
        borderBottomColor: theme.palette.divider,
        verticalAlign: 'middle',
        fontSize: 14,
        minWidth: largeSize,
        height: largeSize,

        '*': {
          verticalAlign: 'middle',
        },
      },
      paddingNone: {
        padding: '0',

        [`.${checkboxClasses.root}`]: {
          padding: 0,
          fontSize: '20px',
        },
      },
      paddingCheckbox: {
        padding: '0',

        [`.${checkboxClasses.root}`]: {
          padding: 0,
          fontSize: '20px',
        },
      },
      sizeSmall: {
        fontSize: fontSizeSmall,
        minWidth: smallSize,
        height: smallSize,
      },
      head: {
        color: theme.palette.text.primary,
        fontWeight: 500,
        backgroundColor: theme.palette.background.default,
        zIndex: 1,

        '&:hover': {
          color: theme.palette.text.primary,
        },

        '&:first-of-type': {
          borderTopLeftRadius: theme.shape.borderRadius,
        },
      },
      stickyHeader: {
        backgroundColor: theme.palette.background.paper,
      },
    },
    variants: [
      {
        props: (props) => props.padding === 'checkbox' && (!props.align || props.align === 'center'),
        style: {
          textAlign: 'center',
        },
      },
    ],
  };
}
