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,
    headingLevel,
    contestName,
    includeDescription
  } = props;
  const [ref, formatOptions] = useFormatOptions(format, expandable, includeDescription);
  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'} headingLevel={headingLevel} contestName={contestName} />
          <ResultsTable id={contestId} format={format} expandable={expandable} expandableCutoff={expandableCutoff} />
        </div>
      </ElectionLink>
    </LeaderboardFormatContext.Provider>;
};
Leaderboard.defaultProps = {
  contestName: undefined,
  format: 'standard',
  expandable: 'expandableAggregation',
  link: 'none',
  expandableCutoff: 2,
  headingLevel: 'h3',
  // Defaulting to h3 because our module titles are h2
  includeDescription: false
};
Leaderboard.propTypes = {
  /**
   * The ID of the contest
   */
  contestId: PropTypes.string.isRequired,
  /**
   * An optional custom contest name override
   */
  contestName: PropTypes.string,
  /**
   * 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']),
  /**
   * What the leaderboard's heading should render as. See our Typography
   * guide for heading level guidance
   */
  headingLevel: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']),
  /**
   * Force inclusion of contest descriptions in the leaderboard, even at small
   * sizes
   */
  includeDescription: PropTypes.bool
};
export default Leaderboard;