import PropTypes from 'prop-types';
import IfActive from "../../../application/IfActive/index.js";
import Row from '../Row';
import OtherCandidatesRow from '../OtherCandidatesRow';
import RowWrapper from '../RowWrapper';
import { useResultsTableFormatContext } from '../context';
import useCandidateGroups from './useCandidateGroups';
const Body = function Body(props) {
  const {
    id
  } = props;
  const {
    expandable,
    expandableCutoff
  } = useResultsTableFormatContext();
  const {
    candidatesToShow,
    otherCandidates,
    showOtherCandidatesRow,
    isExpanded,
    setIsExpanded
  } = useCandidateGroups({
    id,
    expandable,
    expandableCutoff
  });
  return <div role="rowgroup">
      {candidatesToShow.map((candidateId, idx) => <RowWrapper key={candidateId} candidateId={candidateId} idx={idx} id={id}>
          <Row candidateId={candidateId} id={id} idx={idx} />
        </RowWrapper>)}
      <IfActive active={showOtherCandidatesRow}>
        <RowWrapper id={id}>
          <OtherCandidatesRow id={id} candidateIds={otherCandidates} isExpanded={isExpanded} setIsExpanded={setIsExpanded} />
        </RowWrapper>
      </IfActive>
    </div>;
};
Body.defaultProps = {};
Body.propTypes = {
  id: PropTypes.string.isRequired
};
export default Body;