import PropTypes from 'prop-types';
import classnames from 'classnames';
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,
    disableModuleTitle,
    disableScroll
  } = 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,
    disableScroll
  });
  const isMobile = useIsMobile();
  if (!numContests) return null;
  const title = isMobile && eyebrowTitleShort ? eyebrowTitleShort : eyebrowTitle;
  return <div className={classes.container}>
      <div ref={scrollRef} className={classnames(classes.inner, {
      [classes.scroll]: !disableScroll
    })}>
        <div className={classnames(classes.header, {
        [classes.noHeader]: disableModuleTitle
      })} ref={headerRef}>
          <ModuleEyebrow text={title} link={link} isLive />
          <ModuleLastUpdated format="short" />
        </div>

        <ElectionLink to={link}>
          <div className={classes.contests}>
            <div className={classes['contests-inner']} ref={animationRef}>
              {contests.map(contestId => <MiniLeaderboard key={contestId} link="none" contestId={contestId} tracking={{
              context: 'EventRecirc'
            }} />)}
            </div>
          </div>
        </ElectionLink>
      </div>
    </div>;
};
EventRecirc.defaultProps = {
  contestIds: [],
  collectionId: undefined,
  link: undefined,
  eyebrowTitle: undefined,
  eyebrowTitleShort: undefined,
  disableModuleTitle: false,
  disableScroll: false
};
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,
  /**
   * Remove the eyebrow and timestamp
   */
  disableModuleTitle: PropTypes.bool,
  /**
   * Disable the scroll on hover
   */
  disableScroll: PropTypes.bool
};
export default EventRecirc;