import React from 'react';
import { FormattedMessage } from 'react-intl';
import PropTypes from 'prop-types';

import Tag from './Tag';

import './Sidebar.scss';

const TopicsList = ({ topics, metacategories }) => (
  <div>
    <h3 className="title-topics">
      <FormattedMessage
        id="sidebar.categories_title"
        defaultMessage="Categories"
      />
    </h3>

    <p>
      <FormattedMessage
        id="sidebar.categories_desc"
        defaultMessage="This is the list of tags we are going to focus on in this studies."
      />
    </p>

    <dl>
      {
        (topics || []).map(topic => (
          <div key={topic}>
            <dt><Tag tag={topic} categories={topics} metacategories={metacategories} /></dt>
          </div>
        ))
      }
    </dl>
  </div>
);

TopicsList.propTypes = {
  metacategories: PropTypes.arrayOf(PropTypes.object),
  topics: PropTypes.arrayOf(PropTypes.string),
};

TopicsList.defaultProps = {
  metacategories: [],
  topics: [],
};

const MetacategoriesList = ({ topics, metacategories }) => (
  <div>
    <h3>
      <FormattedMessage
        id="sidebar.annotation_protocol"
        defaultMessage="Annotation Protocol"
      />
    </h3>
    {
      (metacategories || []).map((metacategory) => {
        const descId = `data.metacategories.${metacategory.id}.desc`;
        return (
          <div key={metacategory.tag} className="sidebar-metacategories-entry">
            <dt><Tag tag={`cat:${metacategory.tag}`} categories={topics} metacategories={metacategories} /></dt>
            <div className="small"><FormattedMessage id={descId} /></div>
          </div>
        );
      })
    }
  </div>
);

MetacategoriesList.propTypes = {
  metacategories: PropTypes.arrayOf(PropTypes.object),
  topics: PropTypes.arrayOf(PropTypes.string),
};

MetacategoriesList.defaultProps = {
  metacategories: [],
  topics: [],
};

const Sidebar = ({ metacategories, topics }) => (
  <div>
    <MetacategoriesList metacategories={metacategories} topics={topics} />
    <TopicsList metacategories={metacategories} topics={topics} />
  </div>
);

Sidebar.propTypes = {
  metacategories: PropTypes.arrayOf(PropTypes.object),
  topics: PropTypes.arrayOf(PropTypes.string),
};

Sidebar.defaultProps = {
  metacategories: [],
  topics: [],
};

export default Sidebar;