import React from 'react';

import { FormattedMessage } from 'react-intl';

import PropTypes from 'prop-types';

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

import AnnotationsDocumentsTableRow from './AnnotationsDocumentsTableRow';

const AnnotationsDocumentsTable = ({

  documents,

  viaBaseUrl,

  topics,

  metacategories,

}) => (

  <table className="table w-100">

    <thead>

      <tr>

        <th><FormattedMessage id="ui.annotations-documents-table.col.update" defaultMessage="upd." /></th>

        <th><FormattedMessage id="ui.annotations-documents-table.col.document" defaultMessage="document" /></th>

        <th><FontAwesomeIcon icon="user" /></th>

        <th><FontAwesomeIcon icon="pencil-alt" /></th>

        <th><FormattedMessage id="ui.annotations-documents-table.col.h" defaultMessage="h" /></th>

      </tr>

    </thead>

    <tbody>

      {

        documents.map(document => (

          <AnnotationsDocumentsTableRow

            key={document.uri}

            document={document}

            viaBaseUrl={viaBaseUrl}

            topics={topics}

            metacategories={metacategories}

          />

        ))

      }

    </tbody>

  </table>

);

AnnotationsDocumentsTable.propTypes = {

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

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

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

  viaBaseUrl: PropTypes.string.isRequired,

};

export default AnnotationsDocumentsTable;