import PropTypes from 'prop-types';
import { IfActive } from "../../application/index.js";
import classnames from 'classnames';
import { useContestMetadata } from "../../../hooks/election/index.js";
import { ResultsTableFormatContext, useFormatOptions } from './context';
import Header from './Header';
import Body from './Body';
import Footer from './Footer';
import typography from './typography.module.scss';
import classes from './styles.module.scss';
import Footnote from './Footnote';

/**
 * A table of results for either a contest summary or a single reporting
 * unit.
 */
const ResultsTable = function ResultsTable(props) {
  const {
    id,
    format,
    expandable,
    expandableCutoff,
    disableFooter
  } = props;
  const [ref, formatOptions] = useFormatOptions({
    format,
    expandable,
    expandableCutoff,
    id
  });
  const {
    size,
    showVotes
  } = formatOptions;
  const meta = useContestMetadata(id);
  if (!meta) {
    return null;
  }
  const {
    isUncontested
  } = meta;
  return <ResultsTableFormatContext.Provider value={formatOptions}>
      <div role="table" ref={ref} className={classnames(classes.container, classes[size], classes[format], typography[size], {
      [classes.uncontested]: isUncontested
    })}>
        <IfActive active={showVotes}>
          <Header id={id} />
        </IfActive>
        <Body id={id} />
        <IfActive active={!disableFooter}>
          <Footer id={id} />
        </IfActive>
      </div>
      <Footnote contestId={id} />
    </ResultsTableFormatContext.Provider>;
};
ResultsTable.defaultProps = {
  format: 'standard',
  expandable: 'expandableAggregation',
  disableFooter: false,
  expandableCutoff: 2
};
ResultsTable.propTypes = {
  /**
   * The ID of the contest or reporting unit.
   */
  id: PropTypes.string.isRequired,
  /**
   * The format of the results table. This dictates what level of information
   * is available in the results table.
   */
  format: PropTypes.oneOf(['standard', 'condensed']),
  /**
   * How the results table 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,
  /**
   * Disable the footer that reports percent in and the incumbent label.
   * Helpful for use in situations when you want to handle displaying that
   * stuff yourself.
   */
  disableFooter: PropTypes.bool
};
export default ResultsTable;