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

import _ from 'lodash';
import { FormattedMessage } from 'react-intl';
import { categoryColors } from '../utils';

import RowChart from '../ui/RowChart';


/**
 * TODO: As a first implementation we have chosen to delagate the barchart DOM drawing to D3.
 * This may not be the optimum solution. This may have to be rewrittten to use
 * React for elementt creation and D3 as the visualisation kernel. This
 */
const ChartsPage = ({ chartsCounts }) => (
  <div className="col col-12">
    <div className="row">
      <h3><FormattedMessage id="charts.metacategories_title" defaultMessage="Metacategories" /></h3>
    </div>
    <RowChart {...chartsCounts.metacategories} />

    { (chartsCounts.actions.data.length > 0) && (
      <div className="row chart-actions-row">
        <h3><FormattedMessage id="charts.call_to_actions_title" defaultMessage="Call to actions" /></h3>
      </div>
    )}
    { (chartsCounts.actions.data.length > 0) && <RowChart {...chartsCounts.actions} /> }

    { (chartsCounts.categories.data.length > 0) && (
      <div className="row chart-actions-row">
        <h3><FormattedMessage id="charts.categories_title" defaultMessage="Categories" /></h3>
      </div>
    )}
    { (chartsCounts.categories.data.length > 0) && <RowChart {...chartsCounts.categories} /> }

  </div>
);

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

export default connect(
  (state, props) => {
    const { topics, metacategories } = props;
    const annotations = state.annotations.items;
    const topicsList = topics.map(t => t.toLowerCase());
    let tagsCount = _.reduce(
      metacategories,
      (res, m) => {
        res[`cat:${m.tag}`] = {
          id: m.id,
          count: 0,
          tag: m.tag,
          color: categoryColors[m.id],
        };
        return res;
      },
      {},
    );
    tagsCount = _.reduce(
      annotations,
      (res, annot) => {
        annot.tags.forEach((tg) => {
          const t = tg.toLowerCase();
          if (t.startsWith('cat:')) {
            const s = t.substr(4);
            if (!(t in res)) {
              res[t] = {
                id: s,
                count: 0,
                tag: s,
                color: (categoryColors[s] || 'gray'),
              };
            }
            res[t].count += 1;
          } else if (t.startsWith('need:')) {
            const s = t.substr(5);
            if (!(t in res)) {
              res[t] = {
                id: s,
                count: 0,
                tag: s,
                color: 'gray',
              };
            }
            res[t].count += 1;
          } else if (topicsList.includes(t)) {
            if (!(t in res)) {
              res[t] = {
                id: t,
                count: 0,
                tag: t,
                color: 'gray',
              };
            }
            res[t].count += 1;
          }
        });
        return res;
      },
      tagsCount,
    );
    return {
      chartsCounts: {
        metacategories: { data: _.reduce(tagsCount, (res, v, k) => (k.startsWith('cat:') ? [...res, v] : res), []), tagPrefix: 'cat:' },
        actions: { data: _.reduce(tagsCount, (res, v, k) => (k.startsWith('need:') ? [...res, v] : res), []), tagPrefix: 'need:' },
        categories: { data: _.reduce(tagsCount, (res, v, k) => (topicsList.includes(k.toLowerCase()) ? [...res, v] : res), []), tagPrefix: '' },
      },
    };
  },
)(ChartsPage);