import ResultsTable from "../../../../ResultsTable/index.js";
import { useResultsTableFormatContext } from "../../../../ResultsTable/context/index.js";
import ContestRecountStatus from "../../../../ContestRecountStatus/index.js";
import classnames from 'classnames';
import { useContestMetadata } from "../../../../../../hooks/election/index.js";
import { IfActive } from "../../../../../application/index.js";
import classes from './styles.module.scss';
import gridStyles from '../../../grid.module.scss';
const Table = function Table(props) {
  const {
    id,
    candidatesToShow,
    showOtherCandidatesRow,
    otherCandidates
  } = props;
  const meta = useContestMetadata(id);
  const {
    size
  } = useResultsTableFormatContext();
  if (!meta) {
    return null;
  }
  const {
    isUncontested
  } = meta;
  return <div role="table" className={classnames(classes.table, gridStyles.grid, gridStyles[size], {
    [gridStyles.uncontested]: isUncontested
  })}>
      <div className={classes['visually-hidden']}>
        <ResultsTable.Header id={id} />
      </div>
      <div role="rowgroup">
        {candidatesToShow.map((candidateId, idx) => <ResultsTable.SingleCandidatesRow key={candidateId} candidateId={candidateId} id={id} idx={idx} />)}
        <IfActive active={showOtherCandidatesRow}>
          <ResultsTable.AggregateCandidatesRow id={id} candidateIds={otherCandidates} idx={-1} />
        </IfActive>
      </div>
      <div role="rowgroup">
        <ContestRecountStatus id={id} />
      </div>
    </div>;
};
export default Table;