import React from 'react';

import PropTypes from 'prop-types';

import DocumentAnnotation from './DocumentAnnotation';

const AnnotationsList = ({ document, metacategories, categories }) => {

  const { annotations } = document;

  return annotations.map(

    annotation => (

      <DocumentAnnotation

        key={annotation.id}

        annotation={annotation}

        metacategories={metacategories}

        categories={categories}

      />

    ),

  );

};

AnnotationsList.propTypes = {

  document: PropTypes.object.isRequired,

  metacategories: PropTypes.arrayOf(PropTypes.object).isRequired,

  categories: PropTypes.arrayOf(PropTypes.string).isRequired,

};

const DocumentAnnotations = ({

  document,

  metacategories,

  categories,

  viaBaseUrl,

}) => (

  <div className="card">

    <div className="card-header">

      <a href={viaBaseUrl + document.uri} target="_blank" rel="noopener noreferrer">{ document.title }</a>

    </div>

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

      <AnnotationsList

        document={document}

        metacategories={metacategories}

        categories={categories}

      />

    </ul>

  </div>

);

DocumentAnnotations.propTypes = {

  document: PropTypes.object.isRequired,

  metacategories: PropTypes.arrayOf(PropTypes.object).isRequired,

  categories: PropTypes.arrayOf(PropTypes.string).isRequired,

  viaBaseUrl: PropTypes.string.isRequired,

};

export default DocumentAnnotations;