import _ from 'lodash';

import React, { Component } from 'react';
import { FormattedRelative } from 'react-intl';
import PropTypes from 'prop-types';

import Tag from './Tag';

export default class AnnotationsDocumentsTableRow extends Component {
  tags() {
    const { document, topics, metacategories } = this.props;

    const tags = _.chain(document.annotations)
      .map('tags')
      .flatten()
      .uniq()
      .value();

    return tags.map(t => <span className="mr-1 mb-1" key={`${document.uri}_${t}`}><Tag tag={t} categories={topics} metacategories={metacategories} /></span>);
  }

  render() {
    const { document, viaBaseUrl } = this.props;

    const {
      uri,
      name,
      updated,
      usersNb,
      annotationsNb,
    } = document;

    return (
      <tr>
        <td className="text-muted small"><FormattedRelative value={updated} /></td>
        <td>
          <p><a href={uri}>{ name }</a></p>
          <p>{ this.tags() }</p>
        </td>
        <td>{ usersNb }</td>
        <td>{ annotationsNb }</td>
        <td>
          <a href={viaBaseUrl + uri} target="_blank" rel="noopener noreferrer">#</a>
        </td>
      </tr>
    );
  }
}

AnnotationsDocumentsTableRow.propTypes = {
  document: PropTypes.object.isRequired,
  metacategories: PropTypes.arrayOf(PropTypes.object).isRequired,
  topics: PropTypes.arrayOf(PropTypes.string).isRequired,
  viaBaseUrl: PropTypes.string.isRequired,
};