import React from 'react';
import PropTypes from 'prop-types';

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

import AnnotationQuote from './AnnotationQuote';

import './DefinitionBlock.scss';

const DefinitionHeaderIcon = ({ annotation }) => {
  const annotationText = annotation.text || '';
  let faIconName;

  if (annotationText) {
    faIconName = 'user';
  } else if (/^https?:\/\/.+\.wikipedia\.org/.test(annotation.uri)) {
    faIconName = ['fab', 'wikipedia-w'];
  } else {
    faIconName = 'globe';
  }

  return <FontAwesomeIcon icon={faIconName} className="annotation-card-definition-icon" />;
};

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

const DefinitionUser = ({ annotation }) => {
  const [userName] = annotation.user.replace('acct:', '').split('@');

  return (
    <strong>
      { userName }
      {/* <span className="text-muted">@{ instanceName }</span> */}
    </strong>
  );
};

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

const DefinitionBody = ({ annotation, metacategories }) => {
  if (annotation.text) {
    return <ReactMarkdown source={annotation.text} />;
  }
  return <AnnotationQuote annotation={annotation} metacategories={metacategories} />;
};

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


const DefinitionBlock = ({ annotation, metacategories }) => {
  const { document } = annotation;

  return (
    <div className="card definition-card">
      <div className="card-header">
        <DefinitionHeaderIcon annotation={annotation} />
      </div>
      <div className="card-body small">
        <DefinitionBody annotation={annotation} metacategories={metacategories} />
      </div>
      <div className="card-footer">
        <a href={annotation.links.incontext} target="_blank" rel="noopener noreferrer">{ document.title }</a>
        <div>
          <DefinitionUser annotation={annotation} />
        </div>
      </div>
    </div>
  );
};

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

export default DefinitionBlock;