import _ from 'lodash';

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

import { FormattedMessage } from 'react-intl';

import DocumentAnnotations from './DocumentAnnotations';

const AnnotationsCards = ({
  annotations,
  viaBaseUrl,
  metacategories,
  categories,
  children,
}) => {
  const documents = _(annotations).groupBy('uri');

  const documentAnnotations = documents.map((docAnnotations, uri) => {
    const document = {
      uri,
      title: docAnnotations[0].document.title,
      annotations: docAnnotations,
    };

    return (
      <DocumentAnnotations
        key={document.uri}
        document={document}
        viaBaseUrl={viaBaseUrl}
        metacategories={metacategories}
        categories={categories}
      />
    );
  }).value();

  let noAnnotationContent = <FormattedMessage id="ui.annotationsCards.noAnnotation" defaultMessage="No annotation" />;
  if (React.Children.count(children) > 0) {
    noAnnotationContent = children;
  }

  return (
    <div className="card-columns">
      { annotations.length === 0 ? noAnnotationContent : documentAnnotations }
    </div>
  );
};

AnnotationsCards.propTypes = {
  annotations: PropTypes.arrayOf(PropTypes.object),
  viaBaseUrl: PropTypes.string.isRequired,
  metacategories: PropTypes.arrayOf(PropTypes.object).isRequired,
  categories: PropTypes.arrayOf(PropTypes.string).isRequired,
  children: PropTypes.node,
};

AnnotationsCards.defaultProps = {
  annotations: [],
  children: null,
};

export default AnnotationsCards;