import { Component, Input, ElementRef, Output, EventEmitter, OnChanges, AfterViewInit } from '@angular/core';
import { RdLib } from '../../../base/rdLib';
import { BaseChart } from "./baseChart";
import { Portlet } from "../../portlet/portlet";

@Component({
  selector: 'rd-pie-chart',
  template: `
    <div id="dxElement" style="width:100%" [style.height.px]="height"></div>
  `
})
export class PieChart extends BaseChart implements OnChanges, AfterViewInit {
  @Input("rd-text") text: string;
  @Input("rd-sub-text") subText: string;
  @Input("rd-data") data: Array<object>;
  @Input("rd-key-field") keyField: string = "key";
  @Input("rd-value-field") valueField: string = "value";
  @Input("rd-tag-field") tagField: string = "tag";
  @Input("rd-height") height: number | string = 350;
  @Input("rd-legend-visable") legendVisable: boolean = true;
  @Input("rd-bottom-legend") bottomLegend: boolean = false;

  @Output("rd-click") clickEvent: EventEmitter<string> = new EventEmitter<string>();

  constructor(public element: ElementRef, portlet: Portlet) {
    super(element, portlet);
    this.instance = "PieChart";
  }

  ngAfterViewInit() {
    this.render();
  }

  ngDoCheck() {
    if (this.container && this.previousWidth != this.container[0].clientWidth) {
      this.previousWidth = this.container[0].clientWidth;
      this.render();
    }
  }

  ngOnChanges(changes) {
    if (this.initialized) {
      if (changes.keyField || changes.valueField) this.render();
      if (changes.data) {
        this.dxElement.option('dataSource', this.data);
        this.render();
      }
      if (changes.text || changes.subText) {
        this.dxElement.option('title', {
          text: this.text,
          subtitle: { text: this.subText }
        });
      }
    }
  }

  public render() {
    if (this.container[0].clientWidth > 0) {
      this.initialized = true;
      this.container.dxPieChart(this.getChartOptions());
      this.dxElement = this.container.dxPieChart('instance');
      this.dxElement.render();
    }
  }

  private getKeyOptions(valueKey: object) {
    for (var i in this.data) {
      var item = this.data[i]
      var itemValue = RdLib.objectOperations.deepFind(item, this.keyField);
      if (itemValue == valueKey) return {
        color: this.palette[Number(i) % this.palette.length]
      }
    }
  }

  private getChartOptions() {
    let pieChart = this;
    return {
      dataSource: this.data ? this.data : [],
      title: {
        text: this.text,
        subtitle: { text: this.subText },
        font: { size: 16 }
      },
      margin: {
        bottom: 20
      },
      legend: {
        visible: this.legendVisable,
        verticalAlignment: this.bottomLegend ? "bottom" : "top",
        horizontalAlignment: this.bottomLegend ? "center" : "left",
        itemTextPosition: "bottom",
        columnCount: 1,
      },
      animation: { enabled: true },
      resolveLabelOverlapping: "shift",
      export: { enabled: this.export },
      palette: this.palette,
      series: [{
        argumentField: this.keyField,
        valueField: this.valueField,
        tagField: this.tagField,
        label: {
          visible: true,
          customizeText: function (arg) {
            return arg.argumentText + " ( " + arg.percentText + ")";
          }
        },
        hoverStyle: { hatching: { opacity: 0.2, step: 6, width: 2 } }
      }],
      tooltip: {
        enabled: true,
        border: { visible: false },
        color: "#fff",
        font: {
          color: "gray",
          opacity: 1,
          size: 12
        },
        paddingTopBottom: 8,
        zIndex: 9999999999999,
        customizeTooltip: function (arg) {
          var keyOptions = this.getKeyOptions(arg.argument);
          return {
            text: "<span style='font-size: 12px; font-weight: 600; color:" + keyOptions.color + ";'>" + arg.argument +
              "</span><br />" + "<span>" + arg.originalValue + "</span>"
          };
        }.bind(this),
        shadow: {
          opacity: 0.15,
          blur: 0,
          color: "#000000",
          offsetX: 3,
          offsetY: 3
        }
      },
      onLegendClick: function (info) {
        // pieChart.clickEvent.emit(info.points[0].tag);
        let series = this.getAllSeries()[0].getPointsByArg(info.target)[0];
        if (series.isVisible()) {
          series.hide();
        } else {
          series.show();
        }
      },
      onPointClick: function (info) {
        if (info.target.isSelected()) info.target.clearSelection();
        else {
          info.target.select();
          this.clickEvent.emit(info.target.tag);
        }
      }.bind(this)
    }
  }
}