import { getCandidateCallStatus, getContestStatusIsUnclear } from "../../../../utils/election/index.js";
import ElectionIcon from "../../ElectionIcon/index.js";
import { useResults, useContestMetadata, useContestStatus } from "../../../../hooks/election/index.js";
import classnames from 'classnames';
import { useMemo } from 'react';
import classes from './styles.module.scss';
const iconMap = {
  winner: 'OutcomeWin',
  runoff: 'CandidateSwatch'
};
const iconSizes = {
  default: '2',
  winner: '3',
  runoff: '2'
};
const CandidateIcon = function CandidateIcon(props) {
  const {
    candidateId,
    id,
    idx
  } = props;
  const results = useResults(id);
  const contestStatus = useContestStatus(id);
  const metadata = useContestMetadata(id);
  const candidateStatus = getCandidateCallStatus(results, candidateId);
  const iconType = useMemo(() => {
    const numWinners = metadata.numWinners || 1;
    const {
      numRunoff
    } = metadata;
    const isUnclear = getContestStatusIsUnclear(contestStatus);
    if (isUnclear) {
      return 'CandidateSwatch';
    }
    if (iconMap[candidateStatus]) {
      return iconMap[candidateStatus];
    }
    if (contestStatus.outcome === 'runoff' && idx < numRunoff) {
      return 'LeadingCandidateSwatch';
    }
    if (idx < numWinners) {
      return 'LeadingCandidateSwatch';
    }
    return 'CandidateSwatch';
  }, [contestStatus, candidateStatus, metadata, idx]);
  const iconSize = iconSizes[candidateStatus] || iconSizes.default;
  return <span className={classnames(classes.container)}>
      <ElectionIcon type={iconType} size={iconSize} color="currentColor" />
    </span>;
};
export default CandidateIcon;