import PropTypes from 'prop-types';
import classnames from 'classnames';
import ElectionMarkdown from "../../content/ElectionMarkdown/index.js";
import Headshot from "../Headshot/index.js";
import ElectionLink from "../ElectionLink/index.js";
import Timestamp from './Timestamp';
import classes from './styles.module.scss';

/**
 * The `ReporterNote` component renders the content of a reporter note. This
 * can be used to add an annotation to any slot within a module, including on
 * a card attached to the chrome of the module itself. Modules are responsible
 * for providing the space that the note should slot into; this component
 * _only_ renders the annotation's content.
 */
const ReporterNote = function ReporterNote(props) {
  const {
    layout,
    text,
    lastUpdated,
    size,
    attribution: {
      name,
      title,
      avatar,
      link
    } = {},
    disableTimestamp
  } = props;
  if (!text || !lastUpdated) {
    return null;
  }
  const noteChars = text.length;
  const long = noteChars > 249;
  return <div className={classnames(classes.container, classes[layout], classes[size], {
    [classes.noTimestamp]: disableTimestamp,
    [classes.long]: long
  })}>
      <div className={classes.timestamp}>
        <Timestamp timestamp={lastUpdated} />
      </div>
      <div className={classes.content}>
        <ElectionMarkdown source={text} unstyled tracking={{
        context: 'ReporterNote'
      }} />
      </div>
      <div className={classnames(classes.avatar, {
      [classes.noAvatar]: !avatar
    })}>
        <Headshot src={avatar} alt={`Headshot of ${name}, ${title}`} />
      </div>
      <div className={classes.attribution}>
        <div className={classes.name}>
          <ElectionLink to={link} tracking={{
          context: 'ReporterNote:BioLink'
        }}>
            {name}
          </ElectionLink>
        </div>
        <div className={classes.title}>
          {title}
        </div>
      </div>
    </div>;
};
ReporterNote.defaultProps = {
  text: undefined,
  lastUpdated: undefined,
  attribution: undefined,
  layout: 'vertical-top',
  disableTimestamp: false,
  size: 'standard'
};
ReporterNote.propTypes = {
  /**
   * The layout of the note
   */
  layout: PropTypes.oneOf(['vertical-top', 'vertical-bottom', 'horizontal']),
  /**
   * The contents of the note. Supports Markdown.
   */
  text: PropTypes.string,
  /**
   * ISO timestamp indicating when the note was last updated.
   */
  lastUpdated: PropTypes.string,
  /**
   * The staff attribution for the note.
   */
  attribution: PropTypes.shape({
    /**
    * The staff member's name
    */
    name: PropTypes.string.isRequired,
    /**
    * The staff member's title
    */
    title: PropTypes.string.isRequired,
    /**
    * The URL of the staff member's headshot
    */
    avatar: PropTypes.string,
    /**
     * The URL of the staff member's bio page
     */
    link: PropTypes.string
  }),
  /**
   * Suppress the annotation's timestamp from showing up at all.
   */
  disableTimestamp: PropTypes.bool,
  /**
   * The size of the reporter note.
   */
  size: PropTypes.oneOf(['standard', 'large'])
};
export default ReporterNote;