import PropTypes from 'prop-types';
import cx from "../../../utils/css/cx.js";
import ShareTools from "../../brand/ShareTools/index.js";
import IfActive from "../../application/IfActive/index.js";
import ModuleEyebrow from '../ModuleEyebrow';
import ModuleLastUpdated from '../ModuleLastUpdated';
import ReporterNote from '../ReporterNote';
import Headline from './Headline';
import Description from './Description';
import classes from './styles.module.scss';
const cls = cx.merge(classes);
const BigDealPageTitle = function BigDealPageTitle(props) {
  const {
    headline,
    eyebrow,
    description,
    reporterNote,
    disableMargins,
    headingLevel,
    image,
    visual
  } = props;
  const trackingOpts = {
    context: 'BigDealPageTitle'
  };
  return <div className={cls('container', {
    disableMargins
  })}>
      <div className={classes.header}>
        <IfActive active={!!image}>
          <div className={cls('image')}>
            {image}
          </div>
        </IfActive>

        <Headline text={headline} as={headingLevel} />
        <Description text={description} />
      </div>

      <div className={classes.meta}>
        <div className={classes.timestamp}>
          <ModuleLastUpdated scope="page" />
        </div>
        <ModuleEyebrow {...eyebrow} tracking={trackingOpts} />
      </div>

      <ShareTools shareHeadline={headline} colorScale="warmgray" moreBg="warmgray-10" />

      <IfActive active={!!visual}>
        <div className={cls('visual', 'bottom')}>
          {visual}
        </div>
      </IfActive>

      <IfActive active={!!reporterNote}>
        <div className={classes.comment}>
          <ReporterNote layout="vertical-bottom" size="large" card={false} {...reporterNote} />
        </div>
      </IfActive>
    </div>;
};
BigDealPageTitle.defaultProps = {
  eyebrow: {},
  description: undefined,
  reporterNote: undefined,
  disableMargins: false,
  headingLevel: 'h1',
  visual: undefined,
  image: undefined
};
BigDealPageTitle.propTypes = {
  /**
   * The headline of the page
   */
  headline: PropTypes.string.isRequired,
  /**
   * The page eyebrow configuration, to be passed to `ModuleEyebrow`
   */
  eyebrow: PropTypes.shape({
    text: PropTypes.string
  }),
  /**
   * The description of the page
   */
  description: PropTypes.string,
  /**
   * The reporter note, to be passed to `ReporterNote`
   */
  reporterNote: PropTypes.shape({
    attribution: PropTypes.shape({}),
    lastUpdated: PropTypes.string,
    layout: PropTypes.string,
    text: PropTypes.string
  }),
  /**
   * Only render the content with no padding/margins
   */
  disableMargins: PropTypes.bool,
  /**
   * What the page title's heading should render as. See our Typography
   * guide for heading level guidance
   */
  headingLevel: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']),
  /**
   * An optional visual to render below the page title
   */
  visual: PropTypes.node,
  /**
   * An optional image to render at the top of the page title
   */
  image: PropTypes.node
};
export default BigDealPageTitle;