import { useMemo } from 'react';
import cx from "../../../../utils/css/cx.js";
import { useCallFeed, useContestLink } from "../../../../hooks/election/index.js";
import { ElectionIcon, ElectionLink, PartyName } from "../../index.js";
import { getCandidateName, getContestName } from "../../../../utils/election/index.js";
import { IfActive } from "../../../application/index.js";
import getElectionPaletteCssVariables from "../../../../utils/css/getElectionPaletteCssVariables.js";
import { useFormattedTimestamp } from "../../../../hooks/time/index.js";
import { useIsMobile } from "../../../../hooks/breakpoint/index.js";
import classes from './styles.module.scss';
import useAnimation from './useAnimation';
const cls = cx.merge(classes);
const Call = function Call(props) {
  const {
    contestId,
    collectionId,
    idx,
    displayIdx,
    calls,
    important
  } = props;
  const feed = useCallFeed(collectionId);
  const data = useMemo(() => feed.calls.find(c => contestId === (c.call?.contestId ?? c.custom?.id)), [feed, contestId]);
  const isMobile = useIsMobile();
  const timestamp = data?.custom?.timestamp ?? data?.call?.timestamp;
  const [callText, callParty, callType] = useMemo(() => {
    if (!data) {
      return [];
    }
    const {
      contestMetadata,
      candidateMetadata,
      custom: customMetadata
    } = data;
    const party = customMetadata?.party ?? candidateMetadata?.party;
    const office = contestMetadata?.office;
    const holdingParty = contestMetadata?.holdingParty ?? party;
    if (!party) {
      return [];
    }
    const contestNameFormat = function getContestNameFormat() {
      if (isMobile) {
        return 'short';
      }
      if (office === 'senate') {
        return 'medium';
      }
      if (office === 'president') {
        return 'full';
      }
      return 'full';
    }();
    const contestName = getContestName(contestMetadata, {
      format: contestNameFormat
    });
    const candidateName = getCandidateName(candidateMetadata, {
      format: 'short'
    });
    const outcomeCopy = party !== holdingParty ? 'flips' : 'wins';
    const roboText = `${candidateName} ${outcomeCopy} ${contestName}`;
    const palleteParty = office === 'question' ? `ballot-${party}` : party;
    return [customMetadata?.text || roboText, palleteParty, outcomeCopy];
  }, [data, isMobile]);
  const styleVars = getElectionPaletteCssVariables(callParty);
  const contestLink = useContestLink(contestId);
  const displayTime = useFormattedTimestamp(timestamp);
  const {
    active,
    className
  } = useAnimation(idx, displayIdx, calls);
  if (!callText || !active) {
    return undefined;
  }
  return <div className={cls('call', className, callParty, {
    mobile: isMobile,
    important
  })} style={styleVars}>
      <ElectionLink to={data?.custom?.link ?? contestLink}>
        <div className={cls('timestamp')}>
          {displayTime}
        </div>

        <div className={cls('call-inner')}>
          <div className={cls('leaderboard')}>

            <div className={cls('leaderboard-call-type')}>
              <IfActive active={callType === 'flips' && callParty === 'gop'}>
                <ElectionIcon type="OutcomeFlipToGop" size="3" />
              </IfActive>

              <IfActive active={callType === 'flips' && callParty === 'dem'}>
                <ElectionIcon type="OutcomeFlipToDem" size="3" />
              </IfActive>
            </div>

            <div className={cls('leaderboard-party', {
            mobile: isMobile
          })}>
              <PartyName id={callParty} format="letter" />
            </div>
            <div className={cls('leaderboard-icon')}>
              <ElectionIcon type="OutcomeWin" />
            </div>
          </div>

          <div className={cls('copy')}>

            <span className={cls('text', {
            mobile: isMobile
          })}>
              {callText}
            </span>
            <ElectionIcon type="LinkCaret" size="2" />

          </div>
        </div>
      </ElectionLink>
    </div>;
};
export default Call;