import PropTypes from 'prop-types';
import { useContestCollectionMetadata, useContestCollectionHasIncumbent } from "../../../hooks/election/index.js";
import AutoLayout from "../../layout/AutoLayout/index.js";
import ModuleTitle from "../ModuleTitle/index.js";
import IfActive from "../../application/IfActive/index.js";
import Contest from './Contest';
import classes from './styles.module.scss';

/**
 * A collection of leaderboards to round up multiple presidential
 * primaries.
 */
const DelegatePopularVote = function DelegatePopularVote(props) {
  const {
    collectionId,
    headline,
    description,
    eyebrow,
    reporterNote
  } = props;
  const contests = useContestCollectionMetadata(collectionId);
  const hasIncumbent = useContestCollectionHasIncumbent(collectionId);
  if (!contests) return null;
  return <AutoLayout direction="vertical" align="stretch" padding="0" gap="4">
      <ModuleTitle headline={headline} description={description} eyebrow={eyebrow} reporterNote={reporterNote} />
      <div className={classes.contests}>
        {Object.keys(contests).map(contestId => <Contest key={contestId} contestId={contestId} />)}
      </div>
      <IfActive active={hasIncumbent}>
        <div className={classes.incumbent}>
          * Incumbent
        </div>
      </IfActive>
    </AutoLayout>;
};
DelegatePopularVote.defaultProps = {
  headline: undefined,
  description: undefined,
  eyebrow: undefined,
  reporterNote: undefined
};
DelegatePopularVote.propTypes = {
  /**
   * The ID of the contest collection to use
   */
  collectionId: PropTypes.string.isRequired,
  /**
   * A custom headline for the module
   */
  headline: PropTypes.string,
  /**
   * A custom description for the module
   */
  description: PropTypes.string,
  /**
   * An eyebrow configuration for the module
   */
  eyebrow: PropTypes.shape({}),
  /**
   * A reporter annotation
   */
  reporterNote: PropTypes.shape({})
};
export default DelegatePopularVote;