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

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

import './Document.scss';

const Document = ({
  document,
  stats,
  viaBaseUrl,
  intl,
}) => {
  const docStats = stats
    || {
      users: 0,
      annotations: 0,
      comments: 0,
      calls: 0,
    };

  const nbUsersTitle = intl.formatMessage({ id: 'ui.document.nbUsersTitle', defaultMessage: 'Nb. utilisateurs' });
  const nbAnnotationsTitle = intl.formatMessage({ id: 'ui.document.nbAnnotationsTitle', defaultMessage: 'Nb. annotations' });
  const nbCommentsTitle = intl.formatMessage({ id: 'ui.document.nbCommentsTitle', defaultMessage: 'Nb. commentaires' });
  const nbCallsTitle = intl.formatMessage({ id: 'ui.document.nbCallsTitle', defaultMessage: "Nb. d'appels" });

  /* eslint-disable react/no-danger */
  return (
    <div className="card w-100 document-card">

      <div className="card-body">
        <h4 className="card-title">{ document.name }</h4>
        <h6 className="card-subtitle mb-2 text-muted">{ document.author }</h6>

        <p className="card-text small" dangerouslySetInnerHTML={{ __html: document.description }} />

        <a href={viaBaseUrl + document.uri} className="card-link" target="_blank" rel="noopener noreferrer"><FormattedMessage id="ui.document.annotator_link" defaultMessage="Open with annotator" /></a>
      </div>

      <div className="card-footer">
        <div className="stats text-muted small">
          <span title={nbUsersTitle}>
            <FontAwesomeIcon icon="user" />
            {' '}
            <span>{ docStats.users }</span>
          </span>
          <span title={nbAnnotationsTitle}>
            <FontAwesomeIcon icon="pencil-alt" />
            {' '}
            <span>{ docStats.annotations }</span>
          </span>
          <span title={nbCommentsTitle}>
            <FontAwesomeIcon icon="comment" />
            {' '}
            <span>{ docStats.comments }</span>
          </span>
          <span title={nbCallsTitle}>
            <FontAwesomeIcon icon="bell" />
            {' '}
            <span>{ docStats.calls }</span>
          </span>
        </div>
      </div>

    </div>
  );
  /* eslint-enable react/no-danger */
};

Document.propTypes = {
  document: PropTypes.object.isRequired,
  stats: PropTypes.object,
  viaBaseUrl: PropTypes.string.isRequired,
  intl: intlShape.isRequired,
};

Document.defaultProps = {
  stats: {
    users: 0,
    annotations: 0,
    comments: 0,
    calls: 0,
  },
};

export default injectIntl(Document);