import PropTypes from "../../../utils/prop-types/index.js";
import { useContestStatus } from "../../../hooks/election/index.js";
import IfActive from "../../application/IfActive/index.js";
import classnames from 'classnames';
import customizable from "../../../utils/css/customizable.js";
import classes from './styles.module.scss';
import statuses from './statuses';
import ElectionIcon from '../ElectionIcon';

/**
 * A contest's recount status.
 *
 * This component will return a message and an icon based on the recount status.
 * This display can be altered by passing different formats.
 *
 * This component also adds some customizable classes. The class
 * `int-style-ContestRecountStatus` is always available, plus either
 * `int-style-ContestRecountStatus--active` or `int-style-ContestRecountStatus--complete`,
 * depending on whether the recount has completed or not.
 */
const ContestRecountStatus = function ContestRecountStatus(props) {
  const {
    id,
    format,
    iconSize,
    iconColor
  } = props;
  const {
    recount
  } = useContestStatus(id);
  if (!recount) {
    return null;
  }
  const {
    text,
    iconType,
    className
  } = statuses[recount];
  if (!text) {
    return null;
  }
  return <span className={classnames(classes.container, customizable('ContestRecountStatus', `ContestRecountStatus--${className}`))}>
      <IfActive active={format !== 'noIcon'}>
        <ElectionIcon type={iconType} size={iconSize} color={iconColor} />
      </IfActive>
      <IfActive active={format !== 'iconOnly'}>
        {text}
      </IfActive>
    </span>;
};
ContestRecountStatus.defaultProps = {
  format: 'full',
  iconSize: '3',
  iconColor: 'currentColor'
};
ContestRecountStatus.propTypes = {
  /**
   * The ID of the contest whose recount status you'd like to show
   */
  id: PropTypes.string.isRequired,
  /**
   * The format to use
   */
  format: PropTypes.oneOf(['full', 'iconOnly', 'noIcon']),
  /**
   * The size of the icon
   */
  iconSize: PropTypes.string,
  /**
   * The color of the icon
   */
  iconColor: PropTypes.string
};
export default ContestRecountStatus;