import PropTypes from 'prop-types';
import { useContestCollectionMetadata } from "../../../hooks/election/index.js";
import ModuleTitle from "../ModuleTitle/index.js";
import Leaderboard from "../Leaderboard/index.js";
import classes from './styles.module.scss';

/**
 * A collection of leaderboards to present in as a unified whole.
 */
const RacesToWatch = function RacesToWatch(props) {
  const {
    contestIds,
    collectionId,
    headline,
    description,
    eyebrow,
    reporterNote
  } = props;
  if (!collectionId && contestIds.length < 1) {
    throw new Error('must provide either contestIds or collectionId');
  }
  const collectionContests = useContestCollectionMetadata(collectionId);
  const contests = [...contestIds, ...Object.keys(collectionContests || {})];
  if (contests.length < 1) return null;
  return <div className={classes.container}>
      <ModuleTitle headline={headline || 'Races to watch'} description={description} eyebrow={eyebrow} reporterNote={reporterNote} disableBorder />
      <div className={classes.contests}>
        {contests.map(contestId => <div key={contestId} className={classes.contest}>
            <Leaderboard contestId={contestId} format="condensed" link="header" expandable="aggregationOnly" />
          </div>)}
      </div>
    </div>;
};
RacesToWatch.defaultProps = {
  contestIds: [],
  collectionId: undefined,
  headline: undefined,
  description: undefined,
  eyebrow: undefined,
  reporterNote: undefined
};
RacesToWatch.propTypes = {
  /**
   * An array of contest IDs to include explicitly
   */
  contestIds: PropTypes.arrayOf(PropTypes.string),
  /**
   * The ID of the contest collection to use
   */
  collectionId: PropTypes.string,
  /**
   * 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 RacesToWatch;