import PropTypes from 'prop-types';
import { useContestLink } from "../../../hooks/election/index.js";
import ElectionLink from "../ElectionLink/index.js";
import { IfActive } from "../../application/index.js";
import { prependContext } from "../../../utils/tracking/index.js";
import classes from './styles.module.scss';
import Title from './Title';
import Results from './Results';

/**
 * A super condensed and small version of the leaderboard that shows only
 * the most vital information.
 */
const MiniLeaderboard = function MiniLeaderboard(props) {
  const {
    contestId,
    link,
    tracking,
    disableContestName
  } = props;
  const contestLink = useContestLink(contestId);
  const allLink = link === 'all' ? contestLink : undefined;
  return <ElectionLink to={allLink} tracking={{
    context: prependContext({
      prefix: tracking?.context,
      context: 'MiniLeaderboard'
    })
  }}>
      <div className={classes.container}>
        <IfActive active={!disableContestName}>
          <Title contestId={contestId} disableContestName={disableContestName} />
        </IfActive>
        <Results contestId={contestId} />
      </div>
    </ElectionLink>;
};
MiniLeaderboard.defaultProps = {
  link: 'all',
  tracking: undefined,
  disableContestName: false
};
MiniLeaderboard.propTypes = {
  /**
   * The ID of the contest
   */
  contestId: PropTypes.string.isRequired,
  /**
   * Which parts of the leaderboard (if any) should link to the contest itself.
   */
  link: PropTypes.oneOf(['all', 'none']),
  /**
   * A tracking configuration
   */
  tracking: PropTypes.shape({
    context: PropTypes.string
  }),
  /**
   * An option to only show the result
   */
  disableContestName: PropTypes.bool
};
export default MiniLeaderboard;