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

@Component({
  selector: 'rd-line-chart',
  template: `
    <div id="dxElement" style="width:100%" [style.height.px]="height"></div>
  `
})
export class LineChart 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-series") series: Array<IDevChartSerieItem> = [{ valueField: "value", name: "name" }];
  @Input("rd-show-point") showPoint: boolean = false;
  @Input("rd-custom-tooltip") customTooltip: Array<any>;
  @Input("rd-valueAxis") valueAxis: object;
  @Input("rd-argumentAxis-rotate") argumentAxisRotate: boolean = false;
  @Input("rd-enabled-legends") enabledLegends: Array<number> = [];
  @Input("rd-height") height: number | string = 'auto';
  @Input("rd-custom-palette") customPalette: Array<string>;
  @Input("rd-legend-column-count") legendColumnCount: number = 4;

  internalSeries: Array<IDevChartSerieItem> = [];

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

  ngAfterViewInit() {
    this.render();
  }

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

  ngOnChanges(changes) {
    if (changes.series) {
      var series;
      if (typeof this.series === "string") {
        try { series = JSON.parse(this.series); }
        catch (error) { console.error("not valid json: 'rd-series', error: '" + error + "'"); return; }
      }
      else series = this.series;

      this.internalSeries = series;
    }
    if (this.initialized && this.dxElement) {
      setTimeout(() => {
        if (!this.dxElement) this.render();
        if (changes.keyField || changes.series) this.render();
        if (changes.data) this.dxElement.option('dataSource', this.data);
        if (changes.valueAxis) this.dxElement.option('valueAxis', this.valueAxis);
        if (changes.showPoint) this.dxElement.option('commonSeriesSettings.point.visible', !!this.showPoint);
        if (changes.text || changes.subText) {
          this.dxElement.option('title', {
            text: this.text,
            subtitle: { text: this.subText }
          });
        }
        if (changes.customPalette) {
          this.palette = this.customPalette;
          this.dxElement.option('palette', this.palette);
        }
      }, 10);
    }
  }

  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: string) {
    for (var i in this.internalSeries) {
      var item = this.internalSeries[i];
      if (item.valueField == valueKey) return {
        text: item.name ? item.name : item.valueField,
        color: this.palette[Number(i) % this.palette.length]
      }
    }
  }

  private getChartOptions() {
    var legendClicked = false;
    return {
      dataSource: this.data ? this.data : [],
      valueAxis: this.valueAxis,
      commonSeriesSettings: {
        argumentField: this.keyField,
        type: "line",
        point: { visible: !!this.showPoint },
        hoverStyle: { width: 2 },
        hoverMode: 'allArgumentPoints'
      },
      crosshair: {
        enabled: true,
        color: "#4BACC6",
        width: 1,
        dashStyle: "solid",
        horizontalLine: { visible: false },
        label: {
          visible: true,
          backgroundColor: "#4BACC6",
          font: { color: "#fff", size: 12 }
        }
      },
      argumentAxis: {
        valueMarginsEnabled: false,
        discreteAxisDivisionMode: "crossLabels",
        grid: { visible: true },
        label: {
          overlappingBehavior: this.argumentAxisRotate ? { mode: 'rotate', rotationAngle: 45 } : null
        }
      },
      series: this.internalSeries,
      legend: {
        verticalAlignment: "bottom",
        horizontalAlignment: "center",
        itemTextPosition: "bottom",
        columnCount: this.legendColumnCount,
        font: { size: 8 }
      },
      title: {
        text: this.text,
        subtitle: { text: this.subText },
        font: { size: 14 }
      },
      export: { enabled: this.export },
      palette: this.palette,
      tooltip: {
        enabled: true,
        location: "edge",
        paddingLeftRight: 12,
        paddingTopBottom: 6,
        font: {
          color: "gray",
          opacity: 1,
          size: 12
        },
        zIndex: 9999999999999,
        customizeTooltip: function (arg) {
          var tooltip = "";
          if (!this.customTooltip) {
            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;
              }
            }
          } else {
            for (var dataItem of this.data) {
              if (RdLib.objectOperations.deepFind(dataItem, this.keyField) == arg.argument) {
                for (var customItem of this.customTooltip) {
                  tooltip += "<span style='color:#4BACC6;font-size: 12px;'>" + customItem.text + "</span> : ";
                  tooltip += " <span style='color:#333;font-size: 12px;'>" + dataItem[customItem.valueKey] + "</span><br />";
                }
              }
            }
          }
          return { text: tooltip };
        }.bind(this)
      },
      onDrawn: function (e) {
        if (this.enabledLegends.length && !legendClicked) {
          let series = e.component.series;
          for (let index in series) {
            let seriesItem = series[index];
            if (!this.enabledLegends.includes(parseInt(index))) seriesItem.hide();
          }
        }
      }.bind(this),
      onLegendClick: function (e) {
        legendClicked = true;
        var series = e.target;
        if (series.isVisible()) {
          series.hide();
        } else {
          series.show();
        }
      }
    };
  }
}