import PropTypes from 'prop-types';
import { useContestCandidatesMetadata, useContestMetadata, useContestStatus } from "../../../hooks/election/index.js";
import cx from "../../../utils/css/cx.js";
import { BalanceOfPowerBar, CandidateHeadshot, BigDealPageTitle, PageTitle, TopperSplashWell } from "../index.js";
import { statePageTopper, eevpStatus } from "../../../utils/election/autotext/index.js";
import classes from './styles.module.scss';
import useContestBopConfig from './useContestBopConfig';
const cls = cx.merge(classes);

/**
 * A page title that includes a balance of power bar for a specific race.
 * Note that we only show topline numbers, so non-GOP and Dem candidates
 * are grouped together and shown in our other-party color.
 */
const StatePageTopper = function StatePageTopper(props) {
  const {
    stateFips,
    contestId,
    collectionId,
    headline,
    reporterNote,
    eyebrow,
    description,
    bigDealOnWin,
    disableVisual
  } = props;
  const bopConfig = useContestBopConfig({
    contestId,
    collectionId
  });
  const contestStatus = useContestStatus(contestId);
  const contestMetadata = useContestMetadata(contestId);
  const candidates = useContestCandidatesMetadata(contestId);
  const autoHeadline = statePageTopper({
    stateFips,
    isHouse: !!collectionId,
    status: contestStatus,
    contestMetadata,
    candidates
  });
  const autodek = eevpStatus({
    status: contestStatus
  });
  const {
    outcome,
    winningParty,
    winningCandidate
  } = contestStatus;
  const isBigDeal = bigDealOnWin && outcome === 'winner';
  const TitleComponent = isBigDeal ? BigDealPageTitle : PageTitle;
  if (!bopConfig) {
    return null;
  }
  return <div className={cls({
    isBigDeal
  })}>
      <TopperSplashWell winningParty={isBigDeal ? winningParty : undefined}>
        <TitleComponent headline={headline || autoHeadline} reporterNote={reporterNote} eyebrow={eyebrow} description={description || autodek} layout="horizontal" visual={!disableVisual && <BalanceOfPowerBar {...bopConfig} />} image={<div className={classes.headshotContainer}>
              <CandidateHeadshot id={winningCandidate} className={classes.headshot} />
            </div>} />
      </TopperSplashWell>
    </div>;
};
StatePageTopper.defaultProps = {
  stateFips: undefined,
  description: undefined,
  eyebrow: undefined,
  reporterNote: undefined,
  contestId: undefined,
  collectionId: undefined,
  bigDealOnWin: false,
  disableVisual: false
};
StatePageTopper.propTypes = {
  /**
   * The FIPS code of the state for which this topper applies.
   */
  stateFips: PropTypes.string,
  /**
   * The ID of the contest
   */
  contestId: PropTypes.string,
  /**
   * The ID of a contest collection, used for House page toppers
   */
  collectionId: PropTypes.string,
  /**
   * The headline for the module
   */
  headline: PropTypes.string.isRequired,
  /**
   * The optional dek for the module
   */
  description: PropTypes.string,
  /**
   * The optional props for a reporter note
   */
  reporterNote: PropTypes.shape({}),
  /**
   * Custom eyebrow props
   */
  eyebrow: PropTypes.shape({}),
  /**
   * Whether the title should swap to our "big deal" design when a winner is
   * called
   */
  bigDealOnWin: PropTypes.bool,
  /**
   * Whether to suppress the visual that would normally show as part of the
   * page title
   */
  disableVisual: PropTypes.bool
};
export default StatePageTopper;