import get from 'lodash/get';
import { useBop } from "../../../../hooks/election/index.js";
import { Grid, GridItem } from "../../../layout/index.js";
import BalanceOfPowerBar from "../../BalanceOfPowerBar/index.js";
import { TopperSplashWell, CandidateHeadshot, BigDealPageTitle } from "../../index.js";
import { bodyHeadline } from "../../../../utils/election/autotext/index.js";
import NormalTitle from './NormalTitle';
import classes from './styles.module.scss';
import useDisplayProps from './useDisplayProps';
const MainBop = function MainBop(props) {
  const {
    headline,
    eyebrow,
    headlineLink,
    reporterNote,
    id,
    demName,
    gopName,
    office,
    customAutoHeadlines
  } = props;
  const bop = useBop(id);
  const autoHeadline = bodyHeadline({
    office,
    bop,
    customHeadlines: customAutoHeadlines
  });
  const winningParty = get(bop, 'winner.party');
  const {
    candidateId
  } = useDisplayProps(bop);
  if (!bop) {
    return null;
  }
  const TitleComponent = bop.call ? BigDealPageTitle : NormalTitle;
  return <TopperSplashWell winningParty={winningParty}>
      <Grid>
        <GridItem xs={12} md={{
        columns: 10,
        offset: 1
      }}>
          <TitleComponent headline={headline || autoHeadline} reporterNote={reporterNote} eyebrow={eyebrow} headlineLink={headlineLink} align="center" image={<div className={classes.headshotContainer}>
                <CandidateHeadshot id={candidateId} className={classes.headshot} />
              </div>} visual={<BalanceOfPowerBar bop={bop} markCenter demName={demName} gopName={gopName} />} />
        </GridItem>
      </Grid>
    </TopperSplashWell>;
};
export default MainBop;