import PropTypes from 'prop-types';
import get from 'lodash/get';
import cx from "../../../utils/css/cx.js";
import useFeedCalls from './useFeedCalls';
import useBopCalls from './useBopCalls';
import CallList from './CallList';
import classes from './styles.module.scss';
const cls = cx.merge(classes);

/**
 * A collection of leaderboards to present in as a unified whole.
 */
const RaceCall = function RaceCall(props) {
  const {
    collectionId,
    duration,
    recentWindow,
    withShadow
  } = props;
  const feedCalls = useFeedCalls({
    collectionId,
    recentWindow
  });
  const bopCalls = useBopCalls({
    recentWindow
  });
  const [bopCall] = bopCalls.recentCalls;
  return <div className={cls('container')}>
      <CallList animationKey={feedCalls.allCalls.length} duration={duration} withShadow={withShadow} calls={feedCalls.recentCalls} />
      <CallList animationKey={bopCalls.allCalls.length} duration={duration} importantParty={get(bopCall, 'party')} link={get(bopCall, 'link')} withShadow={withShadow} calls={[bopCall].filter(Boolean)} />
    </div>;
};
RaceCall.defaultProps = {
  collectionId: undefined,
  duration: 7 * 1000,
  // 7s
  recentWindow: 5 * 60 * 1000,
  // 5m
  withShadow: false
};
RaceCall.propTypes = {
  /**
   * The ID of the contest collection to use
   */
  collectionId: PropTypes.string,
  /**
   * How many milliseconds to display call alert
   */
  duration: PropTypes.number,
  /**
   * How many milliseconds to consider calls "recent"
   */
  recentWindow: PropTypes.number,
  /**
   * Render with drop shadow
   */
  withShadow: PropTypes.bool
};
export default RaceCall;