import React from 'react';
import PropTypes from 'prop-types';
import { FormattedRelative } from 'react-intl';
import ReactMarkdown from 'react-markdown';

import AnnotationQuote from './AnnotationQuote';
import Tag from './Tag';

import './DocumentAnnotation.scss';

const User = ({ annotation }) => {
  const [userName, instanceName] = annotation.user.replace('acct:', '').split('@');
  return (
    <strong>
      { userName }
      <span className="text-muted">{`@${instanceName}`}</span>
    </strong>
  );
};

User.propTypes = {
  annotation: PropTypes.object.isRequired,
};

const TagList = ({ annotation, metacategories, categories }) => annotation.tags.map(
  tag => <Tag tag={tag} metacategories={metacategories} categories={categories} key={`${annotation.uri}_${tag}`} />,
);

TagList.propTypes = {
  annotation: PropTypes.object.isRequired,
  metacategories: PropTypes.arrayOf(PropTypes.object).isRequired,
  categories: PropTypes.arrayOf(PropTypes.string).isRequired,
};


const DocumentAnnotation = ({ annotation, metacategories, categories }) => (
  <li className="highlight list-group-item d-block">

    <AnnotationQuote annotation={annotation} metacategories={metacategories} />

    <div className="comment-info">
      <User annotation={annotation} />
      {' - '}
      <FormattedRelative value={annotation.updated} />
      {' '}
      <a href={annotation.links.incontext} target="_blank" rel="noopener noreferrer">#</a>
    </div>

    { (annotation.text || annotation.text !== '') && (
      <div className="comment-body text-muted font-italic">
        <ReactMarkdown source={annotation.text} />
      </div>
    )}

    <div className="tags">
      <TagList annotation={annotation} metacategories={metacategories} categories={categories} />
    </div>
  </li>
);

DocumentAnnotation.propTypes = {
  annotation: PropTypes.object.isRequired,
  metacategories: PropTypes.arrayOf(PropTypes.object).isRequired,
  categories: PropTypes.arrayOf(PropTypes.string).isRequired,
};

export default DocumentAnnotation;