import React from 'react';

import PropTypes from 'prop-types';

import { connect } from 'react-redux';

import { FormattedMessage } from 'react-intl';

import _ from 'lodash';

import { AnnotationsDocumentsTable, Document } from '../ui';

const DocumentCategoryList = ({ stats, documents, viaBaseUrl }) => (documents || []).map(

  document => (

    <div key={document.uri} className="col col-4 mb-3 d-flex align-items-stretch">

      <Document

        document={document}

        stats={stats[document.uri]}

        viaBaseUrl={viaBaseUrl}

      />

    </div>

  ),

);

const DocumentsCategory = ({ stats, documentCategory, viaBaseUrl }) => {

  const { category, documents } = documentCategory;

  return (

    <div className="row">

      <h3>{ category }</h3>

      <div className="row">

        <DocumentCategoryList stats={stats} documents={documents} viaBaseUrl={viaBaseUrl} />

      </div>

    </div>

  );

};

DocumentsCategory.propTypes = {

  stats: PropTypes.object.isRequired,

  documentCategory: PropTypes.object.isRequired,

  viaBaseUrl: PropTypes.string.isRequired,

};

const GroupDocuments = ({ annotationsStats, categories, viaBaseUrl }) => categories.map(

  category => (

    <DocumentsCategory

      key={category.category}

      documentCategory={category}

      stats={annotationsStats}

      viaBaseUrl={viaBaseUrl}

    />

  ),

);

const DocumentsPage = ({

  documents,

  documentsMap,

  otherDocuments,

  viaBaseUrl,

  topics,

  metacategories,

  children,

}) => (

  <div className="row">

    <div className="col col-12">

      {

        children

      }

      <GroupDocuments

        annotationsStats={documents}

        categories={documentsMap}

        viaBaseUrl={viaBaseUrl}

      />

      <div className="row">

        <h3><FormattedMessage id="documents.other_documents_title" defaultMessage="Other documents" /></h3>

        <AnnotationsDocumentsTable

          documents={otherDocuments}

          viaBaseUrl={viaBaseUrl}

          topics={topics}

          metacategories={metacategories}

        />

      </div>

    </div>

  </div>

);

DocumentsPage.propTypes = {

  documents: PropTypes.object.isRequired,

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

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

  viaBaseUrl: PropTypes.string.isRequired,

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

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

  children: PropTypes.node.isRequired,

};

export default connect(

  (state, props) => {

    const { documents: { documents }, annotations: { items: annotations } } = state;

    const { documentsMap } = props;

    const documentsUrls = documentsMap.reduce(

      (res, cat) => cat.documents.reduce(

        (docRes, doc) => {

          if (!docRes.includes(doc.uri)) {

            docRes.push(doc.uri);

          }

          return docRes;

        }, res,

      ),

      [],

    );

    const otherDocuments = _(annotations)

      .filter(annot => !documentsUrls.includes(annot.uri))

      .groupBy('uri').map((d, uri) => {

        if (d.length > 0) {

          const firstAnnotation = d[0];

          const usersNb = _.chain(d)

            .map('user')

            .uniq()

            .value().length;

          const titles = firstAnnotation.document.title;

          return {

            uri,

            name: titles ? titles[0] : '',

            updated: firstAnnotation.updated,

            usersNb,

            annotationsNb: d.length,

            annotations: d,

          };

        }

        return {};

      })

      .value();

    return {

      documents,

      documentsUrls,

      otherDocuments,

    };

  },

)(DocumentsPage);