import PropTypes from 'prop-types';
import IfActive from "../../../application/IfActive/index.js";
import Row from '../Row';
import OtherCandidatesRow from '../OtherCandidatesRow';
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) => <Row key={candidateId} candidateId={candidateId} id={id} idx={idx} />)}
      <IfActive active={showOtherCandidatesRow}>
        <OtherCandidatesRow id={id} candidateIds={otherCandidates} isExpanded={isExpanded} setIsExpanded={setIsExpanded} />
      </IfActive>
    </div>;
};
Body.defaultProps = {};
Body.propTypes = {
  id: PropTypes.string.isRequired
};
export default Body;