import { FC } from 'react';

import HuSelectionCard from '@material-hu/components/composed-components/SelectionCard';
import HuRadioButton from '@material-hu/components/design-system/RadioButton/RadioButton';

import { useLokaliseTranslation } from 'src/utils/i18n';

import { AgentGroupHydrated } from '../../../types';

type Props = {
  selected: boolean;
  agentGroup: AgentGroupHydrated;
  onSelect: (agentGroup: AgentGroupHydrated) => void;
  onShowMembers: (agentGroup: AgentGroupHydrated) => void;
};

const AgentGroupSelectionCard: FC<Props> = ({
  selected,
  agentGroup,
  onSelect,
  onShowMembers,
}) => {
  const { t } = useLokaliseTranslation('service_management');

  return (
    <HuSelectionCard
      fullWidth
      onClick={() => onSelect(agentGroup)}
      checked={selected}
      footer={{
        action1: {
          onClick: (e?: React.MouseEvent<Element, MouseEvent>) => {
            if (!e) return;
            e.stopPropagation();
            onShowMembers(agentGroup);
          },
          title: t('VIEW_MEMBERS'),
        },
        text: t('MEMBERS_COUNT', {
          count: agentGroup?.agents?.length || 0,
        }),
      }}
    >
      <HuRadioButton
        color="primary"
        label={agentGroup.name}
        description={agentGroup.description}
        isActive={selected}
      />
    </HuSelectionCard>
  );
};

export default AgentGroupSelectionCard;