import PropTypes from 'prop-types';
import ResultsTable from "../ResultsTable/index.js";
import ElectionLink from "../ElectionLink/index.js";
import { useContestLink } from "../../../hooks/election/index.js";
import classnames from 'classnames';
import typography from './typography.module.scss';
import Header from './Header';
import useFormatOptions from './useFormatOptions';
import { LeaderboardFormatContext } from './context';

/**
 * Leaderboard
 */
const Leaderboard = function Leaderboard(props) {
  const {
    contestId,
    format,
    expandable,
    expandableCutoff,
    link
  } = props;
  const [ref, formatOptions] = useFormatOptions(format, expandable);
  const contestLink = useContestLink(contestId);
  const allLink = link === 'all' ? contestLink : undefined;
  const headerLink = link === 'header' ? contestLink : undefined;
  const {
    size
  } = formatOptions;
  return <LeaderboardFormatContext.Provider value={formatOptions}>
      <ElectionLink to={allLink} tracking={{
      context: 'Leaderboard',
      linkName: contestId
    }}>
        <div ref={ref} className={classnames(typography[size], typography[format])}>
          <Header contestId={contestId} link={headerLink} showLinkArrow={link !== 'none'} />
          <ResultsTable id={contestId} format={format} expandable={expandable} expandableCutoff={expandableCutoff} />
        </div>
      </ElectionLink>
    </LeaderboardFormatContext.Provider>;
};
Leaderboard.defaultProps = {
  format: 'standard',
  expandable: 'expandableAggregation',
  link: 'none',
  expandableCutoff: 2
};
Leaderboard.propTypes = {
  /**
   * The ID of the contest
   */
  contestId: PropTypes.string.isRequired,
  /**
   * The format of the leaderboard. This dictates what level of information is
   * available in the leaderboard.
   */
  format: PropTypes.oneOf(['standard', 'condensed', 'tooltip']),
  /**
   * How the leaderboard should handle additional candidates beyond the few we
   * display by default.
   */
  expandable: PropTypes.oneOf(['expandableAggregation', 'aggregationOnly']),
  /**
   * How many to show before aggregation.
   */
  expandableCutoff: PropTypes.number,
  /**
   * Which parts of the leaderboard (if any) should link to the contest itself.
   */
  link: PropTypes.oneOf(['header', 'all', 'none'])
};
export default Leaderboard;