/* eslint-disable react/forbid-prop-types */
import { Fragment } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import groupBy from 'lodash/groupBy';
import useDateFormat from "../../../hooks/useDateFormat/index.js";
import customizable from "../../../utils/css/customizable.js";
import CommaAnd from "../CommaAnd/index.js";
import Name from './Name';
import classes from './styles.module.scss';

/**
 * Render a standard POLITICO byline.
 */
const Byline = function Byline(props) {
  const {
    authors,
    published,
    updated,
    nameAs: NameTag,
    separator,
    dateFormat,
    textAlign,
    layout
  } = props;
  const publishedFormat = useDateFormat(published, {
    format: dateFormat
  });
  const publishedISO = useDateFormat(published, {
    format: 'iso'
  });
  const updatedFormat = useDateFormat(updated, {
    format: dateFormat
  });
  const updatedISO = useDateFormat(updated, {
    format: 'iso'
  });
  const bylines = groupBy(authors, d => d.by || 'By');
  const showUpdated = new Date(published) < new Date(updated);
  const hasTimes = !!published || showUpdated;
  return <div className={classnames(customizable('Byline'), classes.container, classes[`text-align-${textAlign}`], classes[`layout-${layout}`])}>
      <div className={classes.bylines}>
        {Object.entries(bylines).map(([by, names]) => <Fragment key={by}>
            <div key={by} className={classnames(customizable('Byline__group'), classes.byline)}>
              {by}
              {' '}
              <CommaAnd items={names.map(name => <NameTag name={name} />)} />
            </div>
            {hasTimes && layout === 'inline' && <>
                {' '}
                {separator}
                {' '}
              </>}
          </Fragment>)}
      </div>

      <div className={classes.times}>
        {published && <span className={classnames(customizable('Byline__published'))}>
            <time className={classnames(classes.timestamp)} dateTime={publishedISO}>
              {publishedFormat}
            </time>
          </span>}

        {published && updated && showUpdated && <>
            {' '}
            {separator}
            {' '}
          </>}

        {updated && showUpdated && <span className={classnames(customizable('Byline__updated'))}>
            Updated
            {' '}
            <time className={classnames(classes.timestamp)} dateTime={updatedISO}>
              {updatedFormat}
            </time>
          </span>}
      </div>
    </div>;
};
Byline.defaultProps = {
  published: undefined,
  updated: undefined,
  nameAs: Name,
  dateFormat: 'politico',
  separator: '|',
  layout: 'stacked',
  textAlign: 'left'
};
Byline.propTypes = {
  authors: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
    name: PropTypes.string,
    by: PropTypes.string,
    tagline: PropTypes.string
  }), PropTypes.any])).isRequired,
  published: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
  updated: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
  dateFormat: PropTypes.string,
  separator: PropTypes.node,
  nameAs: PropTypes.elementType,
  layout: PropTypes.oneOf(['stacked', 'inline']),
  textAlign: PropTypes.oneOf(['left', 'center', 'right'])
};
export default Byline;