import { useCandidateCallStatus, useContestMetadata, useContestCandidateColors } from "../../../../hooks/election/index.js";
import getElectionPaletteCssVariables from "../../../../utils/css/getElectionPaletteCssVariables.js";
import { CandidateName, CandidateParty, CandidateVotes } from "../../index.js";
import { IfActive } from "../../../application/index.js";
import classes from './styles.module.scss';
import PartyTag from '../PartyTag';
import WinnerCheck from '../WinnerCheck';
import PolarityTag from '../PolarityTag';
import typography from '../typography.module.scss';
const Candidate = function Candidate(props) {
  const {
    candidateId,
    contestId,
    hasComma,
    hasAnd
  } = props;
  const candidateCallStatus = useCandidateCallStatus(contestId, candidateId);
  const {
    contestType,
    party,
    isBallot,
    isUncontested
  } = useContestMetadata(contestId);
  const winner = candidateCallStatus === 'winner';
  const runoff = candidateCallStatus === 'runoff';
  const isGeneral = contestType === 'general';
  const isOpenPrimary = !isGeneral && !party;
  const candidateColors = useContestCandidateColors(candidateId);
  const palette = candidateColors[candidateId];
  const styleVars = getElectionPaletteCssVariables(palette);
  const showPartyTag = isGeneral && !runoff && !isBallot;
  const showPartyParenthesis = isOpenPrimary || isGeneral && runoff;
  return <div className={classes.container} style={styleVars}>
      <div className={classes.blocks}>
        <IfActive active={showPartyTag}>
          <PartyTag candidateId={candidateId} />
        </IfActive>

        <PolarityTag candidateId={candidateId} />

        <IfActive active={!winner && !runoff && !isUncontested}>
          <div className={classes['votes-block']}>
            <CandidateVotes id={contestId} candidateId={candidateId} format="percent" />
          </div>
        </IfActive>

        <IfActive active={winner}>
          <WinnerCheck candidateId={candidateId} />
        </IfActive>
      </div>
      <IfActive active={!isBallot}>
        <span className={typography['candidate-name']}>
          <CandidateName id={candidateId} format="short" />
          <IfActive active={showPartyParenthesis}>
            {' '}
            <CandidateParty id={candidateId} format="letter-parenthesis" />
          </IfActive>
          <IfActive active={winner && !isBallot}>
            {' '}
            wins
          </IfActive>
        </span>
      </IfActive>

      <span className={typography.context}>
        <IfActive active={hasComma && !hasAnd}>
          ,
          {' '}
        </IfActive>
        <IfActive active={!hasComma && hasAnd}>
          {' '}
          and
          {' '}
        </IfActive>
      </span>

    </div>;
};
export default Candidate;