import { IfActive } from "../../../../application/index.js";
import { useContestStatus } from "../../../../../hooks/election/index.js";
import classnames from 'classnames';
import ResultsTable from "../../../ResultsTable/index.js";
import classes from './styles.module.scss';
import useGroupedCandidates from './useGroupedCandidates';
import ExpandButton from '../ExpandButton';
import Table from './Table';
const ContestResultsTable = function ContestResultsTable(props) {
  const {
    id
  } = props;
  const {
    candidatesToShow,
    otherCandidates,
    showOtherCandidatesRow,
    isExpanded,
    setIsExpanded
  } = useGroupedCandidates(id);
  const {
    outcome
  } = useContestStatus(id);
  const hasBottomPadding = outcome === 'none' && otherCandidates.length === 0 || isExpanded;
  return <div className={classes.container}>
      <div className={classnames(classes['results-table-container'], {
      [classes['has-bottom-padding']]: hasBottomPadding
    })}>
        <ResultsTable.Context format="standard" id={id}>
          <Table id={id} candidatesToShow={candidatesToShow} showOtherCandidatesRow={showOtherCandidatesRow} />
        </ResultsTable.Context>
      </div>
      <div className={classes.expandContainer}>
        <IfActive active={isExpanded || otherCandidates.length > 0}>
          <ExpandButton isExpanded={isExpanded} setIsExpanded={setIsExpanded} hasBorder={outcome === 'none' || isExpanded} />
        </IfActive>
      </div>
    </div>;
};
export default ContestResultsTable;