import PropTypes from 'prop-types';
import classnames from 'classnames';
import IfActive from "../../application/IfActive/index.js";
import ModuleLastUpdated from "../ModuleLastUpdated/index.js";
import ModuleEyebrow from "../ModuleEyebrow/index.js";
import ModuleHeadline from "../ModuleHeadline/index.js";
import ModuleDescription from "../ModuleDescription/index.js";
import ReporterNote from "../ReporterNote/index.js";
import classes from './styles.module.scss';

/**
 * The title section of a module, which includes a last-updated timestamp,
 * an eyebrow, a headline, a description, and a reporter comment. All
 * fields are optional except for the headline.
 */
const ModuleTitle = function ModuleTitle(props) {
  const {
    headline,
    eyebrow,
    description,
    reporterNote,
    reporterNoteLayout,
    disableBorder,
    disableLastUpdated
  } = props;
  return <div className={classnames(classes.container, {
    [classes.disableBorder]: disableBorder
  })}>
      <IfActive active={!disableLastUpdated}>
        <ModuleLastUpdated />
      </IfActive>
      <IfActive active={!!eyebrow}>
        <ModuleEyebrow {...eyebrow || {}} />
      </IfActive>
      <IfActive active={!!headline}>
        <ModuleHeadline>
          {headline}
        </ModuleHeadline>
      </IfActive>
      <IfActive active={!!description}>
        <div className={classes.description}>
          <ModuleDescription>
            {description}
          </ModuleDescription>
        </div>
      </IfActive>
      <IfActive active={!!reporterNote}>
        <div className={classes.comment}>
          <ReporterNote layout={reporterNoteLayout} {...reporterNote} />
        </div>
      </IfActive>
    </div>;
};
ModuleTitle.defaultProps = {
  headline: undefined,
  eyebrow: undefined,
  description: undefined,
  reporterNote: undefined,
  reporterNoteLayout: undefined,
  disableBorder: false,
  disableLastUpdated: false
};
ModuleTitle.propTypes = {
  /**
   * The headline of module.
   */
  headline: PropTypes.string,
  /**
   * The content for the eyebrow of the module.
   */
  eyebrow: PropTypes.shape({}),
  /**
   * The content of the description of the module.
   */
  description: PropTypes.node,
  /**
   * The contents of the reporter comment to include in the module.
   */
  reporterNote: PropTypes.shape({}),
  /**
   * The layout of the reporter comment.
   */
  reporterNoteLayout: PropTypes.string,
  /**
   * Disable the default bottom border
   */
  disableBorder: PropTypes.bool,
  /**
   * Disable the timestamp
   */
  disableLastUpdated: PropTypes.bool
};
export default ModuleTitle;