import PropTypes from 'prop-types';
import { useResults } from "../../../hooks/election/index.js";
import classnames from 'classnames';
import customizable from "../../../utils/css/customizable.js";
import formatProgress from './formatProgress';

/**
 * The progress of a contest represented as the percentage of expected votes
 * that have been tabulated in the contest so far. This either renders
 * a "before-polls-close" message, the expected vote of the contest, or the
 * precincts reporting of the contest, depending on the state of the data
 * available. It can render messages in either a `short` or `full` format.
 *
 * This component also adds some customizable classes. The class
 * `int-style-ResultsVoteIn` is always available, plus either
 * `int-style-ResultsVoteIn--before` or `int-style-ResultsVoteIn--active`,
 * depending on whether polls have closed for the contest or not.
 */
const ResultsVoteIn = function ResultsVoteIn(props) {
  const {
    id,
    format
  } = props;
  const results = useResults(id);
  if (!results || !results.progress) return null;
  const {
    progress,
    status
  } = results;
  const {
    text,
    className
  } = formatProgress({
    progress,
    status,
    format
  });
  return <span className={classnames(customizable('ResultsVoteIn', `ResultsVoteIn--${className}`))}>
      {text}
    </span>;
};
ResultsVoteIn.defaultProps = {
  format: 'full'
};
ResultsVoteIn.propTypes = {
  /**
   * The ID of the results to print the progress of
   */
  id: PropTypes.string.isRequired,
  /**
   * The format of the label
   */
  format: PropTypes.oneOf(['short', 'full'])
};
export default ResultsVoteIn;