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

@Component({
  selector: 'rd-area-chart',
  template: `
    <div id="dxElement" style="width:100%" [style.height.px]="height"></div>
  `
})
export class AreaChart extends BaseChart implements OnChanges {

  @Input("rd-title") title: string;
  @Input("rd-type") type: string = "splinearea";
  @Input("rd-data") data: Array<object> = [];
  @Input('rd-key-field') keyField: string;
  @Input("rd-series") series: Array<IDevChartSerieItem> = [{ valueField: "value", name: "" }];
  @Input("rd-height") height: number | string = 400;
  @Input("rd-legend-visable") legendVisable: boolean = true;

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

  constructor(public element: ElementRef, portlet: Portlet) {
    super(element, portlet);
  }

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

  ngOnChanges(changes) {
    if (this.initialized) {
      if (changes.data || changes.series) this.render();
    }
  }

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

  private getKeyOptions(valueKey) {
    for (var i in this.series) {
      var item = this.series[i];
      if (item.valueField == valueKey) return {
        text: item.name ? item.name : item.valueField,
        color: this.palette[Number(i) % this.palette.length]
      }
    }
  }

  private getChartOptions() {
    return {
      palette: RdLib.constants.colorPalette('pastel'),
      title: this.title,
      dataSource: this.data,
      export: { enabled: this.export },
      commonSeriesSettings: {
        type: this.type,
        argumentField: this.keyField
      },
      argumentAxis: {
        valueMarginsEnabled: false
      },
      crosshair: {
        enabled: true,
        color: "#4BACC6",
        width: 1,
        dashStyle: "solid",
        horizontalLine: { visible: false },
        label: {
          visible: true,
          backgroundColor: "#4BACC6",
          font: { color: "#fff", size: 12 }
        }
      },
      series: this.series,
      tooltip: {
        enabled: true,
        location: "edge",
        paddingLeftRight: 12,
        paddingTopBottom: 6,
        font: {
          color: "gray",
          opacity: 1,
          size: 12
        },
        zIndex: 9999999999999,
        customizeTooltip: function (arg) {
          var tooltip = "";
          for (var item of this.data) {
            if (RdLib.objectOperations.deepFind(item, this.keyField) == arg.argument) {
              tooltip = "<span style='font-size: 12px; font-weight: 600; color:#4BACC6;'>" + arg.argument + "</span>";
              for (var i in item) {
                if (i != this.keyField) {
                  var keyOptions = this.getKeyOptions(i);
                  if (keyOptions) tooltip += "<br /><span style='color:" + keyOptions.color + "'>" + keyOptions.text + "</span>: " + item[i];
                }
              }
              break;
            }
          }
          return { text: tooltip };
        }.bind(this)
      },
      legend: {
        visible: this.legendVisable,
        verticalAlignment: "bottom",
        horizontalAlignment: "center",
        itemTextPosition: 'bottom',
        columnCount: 4,
        font: { size: 8 }
      },
      onLegendClick: function (e) {
        this.clickEvent.emit(e.target);
        var series = e.target;
        if (series.isVisible()) {
          series.hide();
        } else {
          series.show();
        }
      }.bind(this)
    }
  }
}