import PropTypes from 'prop-types';
import { useContestCollectionMetadata } from "../../../hooks/election/index.js";
import { useIsMobile } from "../../../hooks/breakpoint/index.js";
import classes from './styles.module.scss';
import MiniLeaderboard from '../MiniLeaderboard';
import ModuleEyebrow from '../ModuleEyebrow';
import ModuleLastUpdated from '../ModuleLastUpdated';
import useTickerScrollAnimation from './useScrollAnimation';
import ElectionLink from '../ElectionLink';

/**
 * A ticker of leaderboards highlighting races to watch on multi-race
 * nights.
 */
const EventRecirc = function EventRecirc(props) {
  const {
    contestIds,
    collectionId,
    link,
    eyebrowTitle,
    eyebrowTitleShort
  } = 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 || {})];
  const numContests = contests ? contests.length : undefined;
  const [scrollRef, animationRef, headerRef] = useTickerScrollAnimation({
    duration: numContests * 5000
  });
  const isMobile = useIsMobile();
  if (!numContests) return null;
  const title = isMobile && eyebrowTitleShort ? eyebrowTitleShort : eyebrowTitle;
  return <div className={classes.container}>
      <ElectionLink to={link}>
        <div className={classes.inner} ref={scrollRef}>
          <div className={classes.header} ref={headerRef}>
            <ModuleEyebrow text={title} link={link} isLive />
            <ModuleLastUpdated format="short" />
          </div>

          <div className={classes.contests}>
            <div className={classes['contests-inner']} ref={animationRef}>
              {contests.map(contestId => <MiniLeaderboard link="none" contestId={contestId} tracking={{
              context: 'EventRecirc'
            }} />)}
            </div>
          </div>
        </div>

      </ElectionLink>
    </div>;
};
EventRecirc.defaultProps = {
  contestIds: [],
  collectionId: undefined,
  link: undefined,
  eyebrowTitle: undefined,
  eyebrowTitleShort: undefined
};
EventRecirc.propTypes = {
  /**
   * An array of contest IDs to include explicitly
   */
  contestIds: PropTypes.arrayOf(PropTypes.string),
  /**
   * The ID of the contest collection
   */
  collectionId: PropTypes.string,
  /**
   * The event page to link to
   */
  link: PropTypes.string,
  /**
   * The default eyebrow title
   */
  eyebrowTitle: PropTypes.string,
  /**
   * A shorter eyebrow title that is used on mobile
   */
  eyebrowTitleShort: PropTypes.string
};
export default EventRecirc;