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

export default function MuiTabScrollButton(theme: Theme) /*: Components['MuiTabScrollButton']*/ {
  const colorVar = 'var(--internal-scroll-gradient)';
  const scrollButtonGradient = `transparent 0, ${colorVar} 40%, ${colorVar} 100%`;

  const scrollButtonSize = 44;

  return {
    defaultProps: {
      disableRipple: true,
    },
    styleOverrides: {
      root: {
        width: scrollButtonSize,
        fontSize: '20px',
        zIndex: 1,
        position: 'relative',
        opacity: 1,

        [`& .${svgIconClasses.root}`]: {
          fontSize: 'inherit',
        },

        '&:first-of-type': {
          marginRight: -scrollButtonSize,
          background: `linear-gradient(to left, ${scrollButtonGradient})`,
          justifyContent: 'flex-start',

          ...(theme.direction === 'rtl' && {
            background: `linear-gradient(to right, ${scrollButtonGradient})`,
            marginRight: 'auto',
            marginLeft: -scrollButtonSize,
          }),
        },
        '&:last-of-type': {
          marginLeft: -scrollButtonSize,
          background: `linear-gradient(to right, ${scrollButtonGradient})`,
          justifyContent: 'flex-end',

          ...(theme.direction === 'rtl' && {
            background: `linear-gradient(to left, ${scrollButtonGradient})`,
            marginRight: -scrollButtonSize,
            marginLeft: 'auto',
          }),
        },
      },
      vertical: {
        width: '100%',
        fontSize: '20px',
        zIndex: 1,
        position: 'relative',
        opacity: 1,
        textAlign: 'center',

        '&:first-of-type': {
          marginBottom: -scrollButtonSize,
          background: `linear-gradient(to bottom, ${scrollButtonGradient})`,
          marginRight: 0,
          paddingRight: 0,
          justifyContent: 'center',
        },
        '&:last-of-type': {
          marginTop: -scrollButtonSize,
          background: `linear-gradient(to top, ${scrollButtonGradient})`,
          marginLeft: 0,
          paddingLeft: 0,
          justifyContent: 'center',
        },
      },
    },
  };
}
