import { getColors } from '@/themes/getColors';

function getColorStyle({
  color,
  theme
}: {
  color: 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success';
  theme: any;
}): any {
  const colors = getColors(theme, color);
  // @ts-ignore
  const { lighter, main } = colors;

  return {
    color: main,
    backgroundColor: lighter
  };
}

function Badge(theme: any): any {
  const defaultLightBadge = getColorStyle({ color: 'primary', theme });

  return {
    MuiBadge: {
      styleOverrides: {
        standard: {
          minWidth: theme.spacing(2),
          height: theme.spacing(2),
          padding: theme.spacing(0.5)
        },
        light: {
          ...defaultLightBadge,
          '&.MuiBadge-colorPrimary': getColorStyle({ color: 'primary', theme }),
          '&.MuiBadge-colorSecondary': getColorStyle({ color: 'secondary', theme }),
          '&.MuiBadge-colorError': getColorStyle({ color: 'error', theme }),
          '&.MuiBadge-colorInfo': getColorStyle({ color: 'info', theme }),
          '&.MuiBadge-colorSuccess': getColorStyle({ color: 'success', theme }),
          '&.MuiBadge-colorWarning': getColorStyle({ color: 'warning', theme })
        }
      }
    }
  };
}

export { Badge };