import PropTypes from 'prop-types';
import { Well, Grid, GridItem } from "../../layout/index.js";
import { useBop } from "../../../hooks/election/index.js";
import classes from './styles.module.scss';
import MainBop from './MainBop';
import SecondaryContainer from './SecondaryContainer';

/**
 * A collection of Balance of Power bars reflecting the most important
 * contests of the night.
 */
const IndexPageTopper = function IndexPageTopper(props) {
  const {
    reporterNote,
    mainBop: mainBopConfig,
    secondaryBops
  } = props;
  const mainBopId = mainBopConfig.bopId || mainBopConfig.office;
  const bop = useBop(mainBopId);
  const isSplash = !!bop?.call;
  return <div className={classes.container}>
      <MainBop id={mainBopId} office={mainBopConfig.office} eyebrow={mainBopConfig.eyebrow} headline={mainBopConfig.headline} reporterNote={reporterNote} demName={mainBopConfig.demName} gopName={mainBopConfig.gopName} headlineLink={mainBopConfig.headlineLink} customAutoHeadlines={mainBopConfig.customAutoHeadlines} />
      <Well>
        <Grid>
          <GridItem xs={12}>
            <SecondaryContainer configs={secondaryBops} isSplash={isSplash} />
          </GridItem>
        </Grid>
      </Well>

    </div>;
};
IndexPageTopper.defaultProps = {
  reporterNote: undefined
};
IndexPageTopper.propTypes = {
  /**
   * The reporter annotation for the main BOP
   */
  reporterNote: PropTypes.shape({}),
  /**
   * A BOP and headline configuration to display in the top slot.
   */
  mainBop: PropTypes.shape({
    /**
     * The office for which to show the BOP. This will eventually drive autotext headlines.
     */
    office: PropTypes.string,
    /**
     * An id for the type of BOP to show in this slot. If not given, this will fall back
     * on the office prop.
     */
    bopId: PropTypes.string,
    demName: PropTypes.string,
    gopName: PropTypes.string,
    headline: PropTypes.string,
    eyebrow: PropTypes.shape({}),
    headlineLink: PropTypes.string,
    customAutoHeadlines: PropTypes.shape({})
  }).isRequired,
  /**
   * An array of BOP ids and headline configurations to display in the below the
   * top slot.
   */
  secondaryBops: PropTypes.arrayOf(PropTypes.shape({
    /**
     * The office for which to show the BOP. This will eventually drive autotext headlines.
     */
    office: PropTypes.string,
    /**
     * An id for the type of BOP to show in this slot. If not given, this will fall back
     * on the office prop.
     */
    bopId: PropTypes.string,
    headline: PropTypes.string,
    eyebrow: PropTypes.shape({}),
    demName: PropTypes.string,
    gopName: PropTypes.string,
    headlineLink: PropTypes.string
  })).isRequired
};
export default IndexPageTopper;