import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';

import _ from 'lodash';
import AnnotationsCards from '../ui/AnnotationsCards';

const AnnotationsPage = ({
  annotations,
  viaBaseUrl,
  metacategories,
  topics,
}) => (
  <AnnotationsCards
    annotations={annotations}
    viaBaseUrl={viaBaseUrl}
    metacategories={metacategories}
    categories={topics}
  />
);

AnnotationsPage.propTypes = {
  // title: PropTypes.string,
  annotations: PropTypes.array.isRequired,
  viaBaseUrl: PropTypes.string.isRequired,
  metacategories: PropTypes.arrayOf(PropTypes.object).isRequired,
  topics: PropTypes.arrayOf(PropTypes.string).isRequired,
};

export default connect(
  (state, props) => {
    let annotations = state.annotations.items;
    let tag = (props.match.params || {}).tagName;
    if (tag) {
      tag = tag.toLowerCase();
      annotations = _.filter(
        annotations,
        annot => _.find(
          annot.tags,
          t => t.toLowerCase() === tag,
        ),
      );
    }
    return {
      annotations,
    };
  },
)(AnnotationsPage);