import get from 'lodash/get';
import PropTypes from 'prop-types';
import PageTitle from "../PageTitle/index.js";
import BigDealPageTitle from "../BigDealPageTitle/index.js";
import BalanceOfPowerBar from "../BalanceOfPowerBar/index.js";
import BalanceOfGovernorsBar from "../BalanceOfGovernorsBar/index.js";
import cx from "../../../utils/css/cx.js";
import { useBop } from "../../../hooks/election/index.js";
import { bodyHeadline, bodyDek } from "../../../utils/election/autotext/index.js";
import { CandidateHeadshot } from "../index.js";
import TopperSplashWell from '../TopperSplashWell';
import classes from './styles.module.scss';
const cls = cx.merge(classes);
const GeneralElectionTopper = function GeneralElectionTopper(props) {
  const {
    headline,
    eyebrow,
    description,
    reporterNote,
    office,
    bopId = office,
    collectionId,
    demName,
    gopName,
    bigDealOnWin,
    customAutoHeadlines = {},
    bopProps = {}
  } = props;
  const bop = useBop(bopId);
  const winningParty = get(bop, 'winner.party');
  const isBigDeal = bigDealOnWin && !!winningParty;
  const TitleComponent = isBigDeal ? BigDealPageTitle : PageTitle;
  const autoHeadline = bodyHeadline({
    office,
    bop,
    customHeadlines: customAutoHeadlines
  });
  const autoDek = bodyDek({
    office,
    bop
  });
  const imgId = office === 'president' && get(bop, 'call.subjectId');
  const regularBar = <BalanceOfPowerBar bop={bop} height="40" demName={demName} gopName={gopName} markCenter {...bopProps} />;
  const govsBar = <BalanceOfGovernorsBar collectionId={collectionId} height="76" {...bopProps} />;
  const bar = office === 'governor' ? govsBar : regularBar;
  return <div className={cls({
    isBigDeal
  })}>
      <TopperSplashWell winningParty={winningParty} disableSplash={!isBigDeal}>
        <TitleComponent headline={headline || autoHeadline} eyebrow={eyebrow} description={description || autoDek} reporterNote={reporterNote} layout="horizontal" visual={bar} image={imgId && <div className={classes.headshotContainer}>
              <CandidateHeadshot id={imgId} className={classes.headshot} />
            </div>} />
      </TopperSplashWell>
    </div>;
};
GeneralElectionTopper.defaultProps = {
  headline: undefined,
  eyebrow: undefined,
  description: undefined,
  reporterNote: undefined,
  demName: undefined,
  gopName: undefined,
  bopId: undefined,
  bigDealOnWin: false,
  customAutoHeadlines: undefined,
  collectionId: undefined,
  bopProps: undefined
};
GeneralElectionTopper.propTypes = {
  headline: PropTypes.string,
  eyebrow: PropTypes.shape({}),
  description: PropTypes.string,
  reporterNote: PropTypes.shape({}),
  office: PropTypes.oneOf(['president', 'senate', 'house', 'governor']).isRequired,
  bopId: PropTypes.string,
  demName: PropTypes.string,
  gopName: PropTypes.string,
  bigDealOnWin: PropTypes.bool,
  customAutoHeadlines: PropTypes.shape({}),
  collectionId: PropTypes.string,
  bopProps: PropTypes.shape({})
};
export default GeneralElectionTopper;