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

import { ALPHA_500, ALPHA_700 } from '@/mui/constants/opacity';
import { colorList } from '@/mui/constants/palette';

export default function MuiTab(theme: Theme): Components['MuiTab'] {
  return {
    defaultProps: {
      iconPosition: 'start',
    },
    variants: [
      ...colorList.map((key) => {
        const color = theme.palette[key].main;

        return {
          props: { color: key },
          style: {
            color,

            '&.Mui-disabled': {
              color,
            },

            '&.Mui-selected': {
              color,
            },
          },
        };
      }),
    ],
    styleOverrides: {
      root: {
        textAlign: 'left',
        textTransform: 'none',
        maxWidth: '360px',
        minWidth: '48px',
        minHeight: '48px',
        padding: '4px 16px 8px 16px',
        fontSize: 14,
        lineHeight: 1.43,
        fontWeight: 400,
        letterSpacing: 0,
        color: theme.palette.text.primary,
        opacity: ALPHA_700,
        gap: theme.spacing(1),

        [`& .${tabClasses.icon}`]: {
          fontSize: 18,
        },

        '&.Mui-disabled': {
          color: theme.palette.text.primary,
          opacity: ALPHA_500,
        },

        '&.Mui-selected': {
          color: theme.palette.text.primary,
          opacity: 1,

          '&.Mui-disabled': {
            opacity: ALPHA_500,
          },
        },
      },
      icon: {
        marginRight: 0,
      },
    },
  };
}
