import PropTypes from 'prop-types';
import { useContestCollectionMetadata } from "../../../hooks/election/index.js";
import { IfActive } from "../../application/index.js";
import ModuleTitle from "../ModuleTitle/index.js";
import Leaderboard from "../Leaderboard/index.js";
import cx from "../../../utils/css/cx.js";
import getHeadline from './getHeadline';
import classes from './styles.module.scss';
const cls = cx.merge(classes);

/**
 * A collection of leaderboards to present in as a unified whole.
 */
const RacesToWatch = function RacesToWatch(props) {
  const {
    contestIds,
    collectionId,
    headline,
    description,
    eyebrow,
    reporterNote,
    overflowScroll,
    disableModuleTitle,
    includeDescriptions
  } = 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}>
      <IfActive active={!disableModuleTitle}>
        <ModuleTitle headline={getHeadline({
        headline,
        defaultHeadline: 'Races to watch'
      })} description={description} eyebrow={eyebrow} reporterNote={reporterNote} disableBorder />
      </IfActive>
      <div className={cls('contests', {
      overflow: overflowScroll
    })}>
        {contests.map(contestId => <div key={contestId} className={classes.contest}>
            <Leaderboard contestId={contestId} format="condensed" link="header" expandable="aggregationOnly" includeDescription={includeDescriptions} />
          </div>)}
      </div>
    </div>;
};
RacesToWatch.defaultProps = {
  contestIds: [],
  collectionId: undefined,
  headline: undefined,
  description: undefined,
  eyebrow: undefined,
  reporterNote: undefined,
  overflowScroll: false,
  disableModuleTitle: false,
  includeDescriptions: false
};
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({}),
  /**
   * Determines overflow scroll for homepage embed
   */
  overflowScroll: PropTypes.bool,
  /**
   * Disable the timestamp, eyebrow, headline, description
   */
  disableModuleTitle: PropTypes.bool,
  /**
   * Include contest descriptions in the leaderboards (helpful for ballot
   * measures)
   */
  includeDescriptions: PropTypes.bool
};
export default RacesToWatch;