import PropTypes from 'prop-types';
import classnames from 'classnames';
import IfActive from "../../application/IfActive/index.js";
import { prependContext } from "../../../utils/tracking/index.js";
import classes from './styles.module.scss';
import ElectionCaretLink from '../ElectionCaretLink';

/**
 * The eyebrow of a module, which can include an optional "live" indicator as
 * well as additional text which can optionally link somewhere. The link uses
 * `ElectionLink` under the hood, so it supports page-role links.
 */
const ModuleEyebrow = function ModuleEyebrow(props) {
  const {
    isLive,
    link,
    text,
    tracking
  } = props;
  if (!text && !isLive) return null;
  const liveTag = text ? 'Live' : 'Live Results';
  const trackingOpts = {
    context: prependContext({
      prefix: 'ModuleEyebrow',
      context: tracking?.context
    })
  };
  return <div className={classnames(classes.eyebrow, {
    [classes.isLive]: isLive
  })}>
      <IfActive active={isLive}>
        <span className={classes.live}>
          {liveTag}
        </span>
      </IfActive>

      <IfActive active={isLive && text}>
        <span className={classes.live}>|</span>
      </IfActive>

      <IfActive active={text && !link}>
        {text}
      </IfActive>

      <IfActive active={text && link}>
        <ElectionCaretLink to={link} text={text} red tracking={trackingOpts} />

      </IfActive>
    </div>;
};
ModuleEyebrow.defaultProps = {
  isLive: false,
  link: undefined,
  text: undefined,
  tracking: {}
};
ModuleEyebrow.propTypes = {
  /**
   * Whether to include "LIVE RESULTS"
   */
  isLive: PropTypes.bool,
  /**
   * A link to use for the eyebrow's text. This can either be a URL or
   * a page-role link.
   */
  link: PropTypes.string,
  /**
   * The contents of the eyebrow.
   */
  text: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
  /**
   * Tracking options
   */
  tracking: PropTypes.shape({
    context: PropTypes.string
  })
};
export default ModuleEyebrow;