import classnames from 'classnames';
import CandidateParty from "../../CandidateParty/index.jsx";
import CandidateIncumbentLabel from "../../CandidateIncumbentLabel/index.jsx";
import CandidateName from "../../CandidateName/index.js";
import IfActive from "../../../application/IfActive/index.js";
import { useCandidateCallStatus, useAnimateDataChange } from "../../../../hooks/election/index.js";
import { useResultsTableFormatContext } from '../context';
import CandidateIcon from '../CandidateIcon';
import typography from '../typography.module.scss';
import classes from './styles.module.scss';
const CandidateHeader = function CandidateHeader(props) {
  const {
    candidateId,
    id,
    idx
  } = props;
  const {
    candidateNameFormat,
    showPartyTags
  } = useResultsTableFormatContext();
  const candidateStatus = useCandidateCallStatus(id, candidateId);
  const [animationRef] = useAnimateDataChange({
    trigger: idx
  });
  return <div role="rowheader" className={classes.container}>
      <span className={classes.flexContainer} ref={animationRef}>
        <CandidateIcon candidateId={candidateId} id={id} idx={idx} />
        <span className={classnames(classes.text, typography.cellText, {
        [typography.bold]: candidateStatus === 'winner'
      })}>
          <CandidateName id={candidateId} format={candidateNameFormat} animate />
          <CandidateIncumbentLabel id={candidateId} />
          {' '}
          <span className={classnames(classes.parenthetical, typography.label)}>
            <IfActive active={showPartyTags}>
              <CandidateParty id={candidateId} format="letter-parenthesis" />
            </IfActive>
          </span>
        </span>
      </span>
    </div>;
};
export default CandidateHeader;