import PropTypes from 'prop-types';
import cx from "../../../utils/css/cx.js";
import { useIsMobile } from "../../../hooks/breakpoint/index.js";
import Call from './Call';
import classes from './styles.module.scss';
import useTrackCalls from './useTrackCalls';
const cls = cx.merge(classes);

/**
 * A collection of leaderboards to present in as a unified whole.
 */
const RaceCall = function RaceCall(props) {
  const {
    collectionId
  } = props;
  const [newCalls, displayIdx] = useTrackCalls(collectionId, false);
  const [newImptCalls, displayImptIdx] = useTrackCalls(collectionId, true);
  const isMobile = useIsMobile();
  return <div className={cls('container')}>
      <div className={cls('inner', 'important', {
      mobile: isMobile
    })}>
        {newCalls.map((contestId, idx) => <Call key={contestId} contestId={contestId} collectionId={collectionId} idx={idx} displayIdx={displayIdx} calls={newCalls} />)}
      </div>
      <div className={cls('inner', 'important', {
      mobile: isMobile
    })}>
        {newImptCalls.map((contestId, idx) => <Call key={contestId} contestId={contestId} collectionId={collectionId} idx={idx} displayIdx={displayImptIdx} calls={newImptCalls} important />)}
      </div>
    </div>;
};
RaceCall.defaultProps = {
  collectionId: undefined
};
RaceCall.propTypes = {
  /**
   * The ID of the contest collection to use
   */
  collectionId: PropTypes.string
};
export default RaceCall;