import React from 'react';
import { sentiments } from "config";
import { percentage } from 'utils/index';
import './ParentChildLabelBySentimentBar.css';
import { labelFilter } from './filterLabels.js';

export default (props) => {
  if (!props.data) {
    return <span>No data</span>;
  }
  const { data: { loading, error, dataMapping }, width, height, data, showLabel } = props;
  if (loading) {
    return <span>Chart Loading</span>;
  }
  if (error) {
    data.refetch().catch(e => null);
    return <span>Connecting</span>;
  }
  if (dataMapping.buckets.length === 0) {
    return <span>No data</span>
  }

  const labelsChecked = {};
  labelFilter.forEach(label => {
    if (label.check) {
      if (label.labels.length > 0) {
        label.labels.forEach(item => {
          if (item.check) {
            labelsChecked[item._id] = {
              name: item.name,
              parentName: label.name,
              parentId: label._id,
            };
          }
        });
      } else {
        labelsChecked[label._id] = {
          name: label.name,
          parentName: null,
          parentId: null
        };
      }
    }
  });
  // console.log("labelsChecked: ", labelsChecked);
  // console.log("labelData: ", dataMapping.buckets);
  const labelData = dataMapping.buckets;
  const labelWithParent = {};
  labelData.forEach(label => {
    const currentLabel = labelsChecked[label.key];
    if (currentLabel && currentLabel.parentId) {
      console.log("currentLabel.parentId: ", currentLabel.parentId);
      if (labelWithParent.hasOwnProperty(currentLabel.parentId)) {
        label.groupBy.buckets.forEach(bucket => {
          if (labelWithParent[currentLabel.parentId]['groupBy']['buckets'].hasOwnProperty(bucket.key)) {
            labelWithParent[currentLabel.parentId]['groupBy']['buckets'][bucket.key] = labelWithParent[currentLabel.parentId]['groupBy']['buckets'][bucket.key] + bucket.doc_count;
          } else {
            labelWithParent[currentLabel.parentId]['groupBy']['buckets'][bucket.key] = bucket.doc_count;
          }

        });
        labelWithParent[currentLabel.parentId]['labels'].push(label);
        labelWithParent[currentLabel.parentId]['doc_count'] = labelWithParent[currentLabel.parentId]['doc_count'] + label.doc_count;
      } else {
      console.log("else.parentId: ", currentLabel.parentId);

        const buckets = {};
        label.groupBy.buckets.forEach(bucket => {
          buckets[bucket.key] = bucket.doc_count;
        });
        labelWithParent[currentLabel.parentId] = {
          name: currentLabel.parentName,
          labels: [label],
          groupBy: {
            buckets
          },
          doc_count: label.doc_count
        }
      }
    } else if (currentLabel) {
      labelWithParent[label.key] = {
        name: label.name,
        doc_count: label.doc_count,
        groupBy: label.groupBy,
        labels: []
      }
    }
  });
  let dataFinal = [];
  for (let [key, value] of Object.entries(labelWithParent)) {
    if (value.labels.length > 0) {
      const buckets = [];
      for (let [k, v] of Object.entries(value.groupBy.buckets)) {
        buckets.push({
          key: k,
          doc_count: v
        });
      }
      dataFinal.push({
        key: key,
        doc_count: value.doc_count,
        name: value.name,
        groupBy: {
          buckets: buckets
        },
        parent: true
      });

      //push child
      const newData = [...dataFinal, ...value.labels];
      dataFinal = newData;
    } else {
      const buckets = [];
      for (let [k, v] of Object.entries(value.groupBy.buckets)) {
        buckets.push({
          key: v.key,
          doc_count: v.doc_count
        });
      }
      dataFinal.push({
        key: key,
        doc_count: value.doc_count,
        name: value.name,
        groupBy: {
          buckets: buckets
        },
        parent: true
      });
    }
  }
  //map data to chart
  const content = dataFinal.map((bucket, i) => {
    let iconParrent,
      classParent = null,
      styleLabel = {
        display: 'none'
      };
    if (bucket.parent) {
      iconParrent = (<i className="fa fa-caret-down"></i>);
      classParent = 'is-parent';
      styleLabel = null;
    } else if (showLabel) {
      styleLabel = null;
    }
    const progressSentiment = bucket.groupBy.buckets.map((item, k) => {
      const sentimentType = item.key == '1' ? 'positive' : item.key == '2' ? 'negative' : 'neutral';
      const value = percentage(item.doc_count, dataFinal[0].doc_count);
      const graphData = {
        total: item.doc_count,
        sentimentName: sentimentType,
        labelName: bucket.name,
        sentimentId: item.key,
        labelId: bucket.key,
        parent: bucket.parent || false
      };
      return (
        <div
          className={`progress-bar bg-${sentimentType}`}
          role="progressbar"
          style={{ width: value + '%' }}
          aria-valuenow={value}
          aria-valuemin="0"
          aria-valuemax="100"
          data-toggle="tooltip"
          data-placement="top"
          title={`${sentimentType}: ${item.doc_count} buzz`}
          key={k} >
          {item.doc_count}
        </div>
      )
    });
    return (
      <div className={`columns is-mobile ${classParent}`} key={i} style={styleLabel}>
        <div className="column">
          <div className="label-name">{bucket.name} {iconParrent}</div>
        </div>
        <div className="column">
          <div className="progress">
            {progressSentiment}
            <span className="total-buzz">{bucket.doc_count}&nbsp;buzz</span>
          </div>
        </div>
      </div>
    );
  });

  return (
    <div className="parrent-child-label">
      {content}
    </div>
  );
}