import pluralize from 'pluralize';
import React from 'react';

import { useStyles2 } from '@grafana/ui';
import { AlertmanagerGroup, AlertState } from 'app/plugins/datasource/alertmanager/types';

import { getNotificationsTextColors } from '../../styles/notifications';

interface Props {
  group: AlertmanagerGroup;
}

export const AlertGroupHeader = ({ group }: Props) => {
  const textStyles = useStyles2(getNotificationsTextColors);
  const total = group.alerts.length;
  const countByStatus = group.alerts.reduce(
    (statusObj, alert) => {
      if (statusObj[alert.status.state]) {
        statusObj[alert.status.state] += 1;
      } else {
        statusObj[alert.status.state] = 1;
      }
      return statusObj;
    },
    {} as Record<AlertState, number>
  );

  return (
    <div>
      {`${total} ${pluralize('alert', total)}: `}
      {Object.entries(countByStatus).map(([state, count], index) => {
        return (
          <span
            key={`${JSON.stringify(group.labels)}-notifications-${index}`}
            className={textStyles[state as AlertState]}
          >
            {index > 0 && ', '}
            {`${count} ${state}`}
          </span>
        );
      })}
    </div>
  );
};
