import React from 'react';
import PropTypes from 'prop-types';
import { NavLink } from 'react-router-dom';
import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
import md5 from 'md5';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

import './TermEntry.scss';


function getTermDefinition(annotation) {
  if (annotation.text) {
    return annotation.text;
  }

  let selector;

  if (annotation.target[0].selector) {
    selector = annotation.target[0].selector.find(s => s.type === 'TextQuoteSelector');
  }

  if (selector) {
    return selector.exact;
  }
  return '';
}

const TermEntry = ({ term, termDef, intl }) => {
  const key = `${md5(term)}-term-entry`;

  let firstDefinition = '';

  if (termDef.definitions.length > 0) {
    firstDefinition = getTermDefinition(termDef.definitions[0]);
  }
  if (!firstDefinition) {
    firstDefinition = <span className="text-muted font-italic"><FormattedMessage id="ui.termEntry.noDefinition" defaultMessage="No definition yet" /></span>;
  }

  const definitionsTitle = intl.formatMessage({ id: 'ui.termEntry.nbDefinitions', defaultMessage: 'Nb. definitions' });
  const referencesTitle = intl.formatMessage({ id: 'ui.termEntry.nbReferences', defaultMessage: 'Nb. references' });
  const commentsTitle = intl.formatMessage({ id: 'ui.termEntry.nbComments', defaultMessage: 'Nb. comments' });

  return (
    <tr id={key}>
      <th scope="row" className="term-entry-term"><NavLink to={`/term/${encodeURIComponent(term)}`} className="term-entry-term-link">{term}</NavLink></th>
      <td className="term-entry-def">
        <p>{firstDefinition}</p>
        <p className="glossary-table-counts align-text-bottom text-right text-muted small">
          <span title={definitionsTitle}>
            <NavLink to={`/term/${encodeURIComponent(term)}`} className="term-entry-term-link">
              <FontAwesomeIcon icon="file-alt" />
              {' '}
              <span>{ termDef.definitions.length }</span>
            </NavLink>
          </span>
          <span title={referencesTitle}>
            <NavLink to={`/term/${encodeURIComponent(term)}/1`} className="term-entry-term-link">
              <FontAwesomeIcon icon="share-alt" />
              {' '}
              <span>{ termDef.references.length }</span>
            </NavLink>
          </span>
          <span title={commentsTitle}>
            <NavLink to={`/term/${encodeURIComponent(term)}/2`} className="term-entry-term-link">
              <FontAwesomeIcon icon="comments" />
              {' '}
              <span>{ termDef.messagesCount || 0 }</span>
            </NavLink>
          </span>
        </p>
      </td>
    </tr>
  );
};

TermEntry.propTypes = {
  term: PropTypes.string.isRequired,
  termDef: PropTypes.object.isRequired,
  intl: intlShape.isRequired,
};

export default injectIntl(TermEntry);