import React, { Component } from 'react';

import PropTypes from 'prop-types';

import { FormattedRelative } from 'react-intl';

import ReactMarkdown from 'react-markdown';

import Tag from './Tag';

import AnnotationQuote from './AnnotationQuote';

export default class Annotation extends Component {

  user() {

    const { annotation } = this.props;

    const [userName, instanceName] = annotation.user.replace('acct:', '').split('@');

    return (

      <strong>

        { userName }

        <span className="text-muted">{`@${instanceName}`}</span>

      </strong>

    );

  }

  tags() {

    const { annotation, metacategories, categories } = this.props;

    const tagMetacategories = [];

    const others = [];

    annotation.tags.forEach((tagStr) => {

      if (tagStr.startsWith('cat:')) {

        tagMetacategories.push(tagStr);

      } else {

        others.push(tagStr);

      }

    });

    /* eslint-disable max-len */

    return (

      <div className="tags">

        { tagMetacategories.map(tag => <Tag tag={tag} metacategories={metacategories} categories={categories} />) }

        { others.map(tag => <Tag tag={tag} metacategories={metacategories} categories={categories} />) }

      </div>

    );

    /* eslint-enable max-len */

  }

  render() {

    const { annotation, metacategories } = this.props;

    const dateUpdated = (

      <FormattedRelative

        value={annotation.updated}

      />

    );

    let body = '';

    if (annotation.text || annotation.text !== '') {

      body = (

        <div className="comment-body text-muted font-italic">

          <ReactMarkdown source={(annotation.text)} />

        </div>

      );

    }

    return (

      <div className="card">

        <div className="card-header">

          <a href={annotation.uri}>{ annotation.document.title }</a>

        </div>

        <ul className="list-group list-group-flush small">

          <li className="highlight list-group-item d-block">

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

            <div className="comment-info">

              { `${this.user()} - ${dateUpdated} `}

              <a href={annotation.links.incontext}>#</a>

            </div>

            { body }

            { this.tags() }

          </li>

        </ul>

      </div>

    );

  }

}

Annotation.propTypes = {

  annotation: PropTypes.isRequired,

  metacategories: PropTypes.isRequired,

  categories: PropTypes.isRequired,

};