import { apnumber } from 'journalize';
import { useContestSummaryResults, useContestMetadata } from "../../../../hooks/election/index.js";
import { useMemo } from 'react';
import typography from '../typography.module.scss';
const defaultCallNums = {
  runoff: {
    key: 'numRunoff',
    defaultNum: 2
  },
  winner: {
    key: 'numWinners',
    defaultNum: 1
  }
};
const SpotsRemaining = function SpotsRemaining(props) {
  const {
    contestId,
    callType
  } = props;
  const summary = useContestSummaryResults(contestId);
  const meta = useContestMetadata(contestId);
  const spotsRemaining = useMemo(() => {
    const {
      calls
    } = summary;
    const currentCalls = calls.filter(call => call.type === callType);
    const callTypeKey = defaultCallNums[callType].key;
    const possibleCalls = meta[callTypeKey] || defaultCallNums[callType].defaultNum;
    if (!summary) {
      return undefined;
    }
    return possibleCalls - currentCalls.length;
  }, [callType, summary, meta]);
  if (!spotsRemaining) {
    return null;
  }
  return <span className={typography.context}>
      ,
      {' '}
      {apnumber(spotsRemaining)}
      {' '}
      {`spot${spotsRemaining > 1 ? 's' : ''}`}
      {' '}
      remaining
    </span>;
};
export default SpotsRemaining;