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

const fontWeight = [100, 200, 300, 400, 500, 600, 700, 800, 900] as const;

export default function MuiTypography(theme: Theme): Components['MuiTypography'] {
  return {
    defaultProps: {
      variant: 'inherit',
      color: 'inherit',
      variantMapping: {
        h1: 'div',
        h2: 'div',
        h3: 'div',
        h4: 'div',
        h4Alt: 'div',
        h5: 'div',
        h6: 'div',
        h6Alt: 'div',
        subtitle1: 'div',
        subtitle2: 'div',
        body1: 'span',
        body2: 'span',
        caption: 'span',
        captionSmall: 'span',
        captionXSmall: 'span',
        overline: 'span',
        inherit: 'span',
      },
    },
    variants: [
      ...fontWeight.map((value) => ({
        props: { fontWeight: value },
        style: {
          fontWeight: value,
        },
      })),
      {
        props: { textTransform: 'capitalize' },
        style: {
          textTransform: 'capitalize',
        },
      },
      {
        props: { textTransform: 'uppercase' },
        style: {
          textTransform: 'uppercase',
        },
      },
      {
        props: { textTransform: 'lowercase' },
        style: {
          textTransform: 'lowercase',
        },
      },
    ],
    styleOverrides: {
      root: ({ ownerState }) => {
        if (typeof ownerState.rows === 'number' && ownerState.rows >= 1) {
          return {
            position: 'relative',
            display: '-webkit-box',
            overflow: 'hidden',
            overflowWrap: 'anywhere',
            textAlign: 'initial',
            textOverflow: 'ellipsis',
            WebkitBoxOrient: 'vertical',
            WebkitLineClamp: `${ownerState.rows}`,
          };
        }
        return {};
      },
      gutterBottom: {
        marginBottom: theme.spacing(1),
      },
    },
  };
}
