import { useTheme, alpha, Typography, styled } from '@mui/material';
import { AppBadgeDefaultProps, BadgeContainer } from './app-badge-default';
import { BadgeColor, getBgColor, getTextColor } from './app-badge-version';

const StateIcon = styled('span')<{ color: string }>(({ theme, color }) => {
  return {
    position: 'relative',
    display: 'inline-block',
    width: theme.spacing(1),
    height: theme.spacing(1),
    borderRadius: '50%',
    backgroundColor: color,
    marginRight: theme.spacing(1),
  };
});

export interface AppBadgeStateProps extends AppBadgeDefaultProps {
  color?: BadgeColor;
}

export function AppBadgeState({ value = '', color = 'primary', loading = false, ...rest }: AppBadgeStateProps) {
  const theme = useTheme();
  const txtcolor = getTextColor(theme, color);
  const bgcolor = getBgColor(theme, color);

  return (
    <BadgeContainer
      loading={loading}
      sx={{
        borderColor: alpha(txtcolor, 0.2),
        bgcolor,
      }}
      {...rest}>
      <StateIcon color={getTextColor(theme, color)} />
      <Typography className="app-badge-value" style={{ color: txtcolor }}>
        {value}
      </Typography>
    </BadgeContainer>
  );
}
