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 PageTitle = function PageTitle(props) {
  const {
    headline,
    headlineLink,
    eyebrow,
    description,
    reporterNote,
    layout,
    align,
    disableMargins,
    headingLevel,
    visual
  } = props;
  const trackingOpts = {
    context: 'PageTitle'
  };
  return <div className={cls('container', align, {
    disableMargins
  })}>
      <ShareTools shareHeadline={headline} colorScale="warmgray" moreBg="warmgray-10" margin={{
      b: '4'
    }} />

      <div className={cls('meta', align)}>
        <div className={classes.timestamp}>
          <ModuleLastUpdated scope="page" />
        </div>
        <ModuleEyebrow {...eyebrow} tracking={trackingOpts} />
      </div>

      <div className={cls(layout, align)}>
        <div>
          <Headline text={headline} as={headingLevel} link={headlineLink} />
          <Description text={description} />

        </div>
        <IfActive active={reporterNote}>
          <div className={classes.comment}>
            <ReporterNote layout="vertical-bottom" size="large" {...reporterNote} />
          </div>
        </IfActive>

      </div>

      <IfActive active={!!visual}>
        <div className={classes.visual}>
          {visual}
        </div>
      </IfActive>
    </div>;
};
PageTitle.defaultProps = {
  eyebrow: {},
  description: undefined,
  reporterNote: undefined,
  layout: 'vertical',
  align: 'left',
  disableMargins: false,
  headingLevel: 'h1',
  visual: undefined,
  headlineLink: undefined
};
PageTitle.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
  }),
  /**
   * Specify the layout
   */
  layout: PropTypes.oneOf(['vertical', 'horizontal']),
  /**
   * Specify the alignment
   */
  align: PropTypes.oneOf(['left', 'center']),
  /**
   * 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 inside the page title
   */
  visual: PropTypes.node,
  /**
   * An optional election link for the headline
   */
  headlineLink: PropTypes.string
};
export default PageTitle;