import { Component, ElementRef, Input, Output, NgZone, EventEmitter } from '@angular/core';
import { BaseAmChartV3 } from './baseAmChart-v3';
import { Portlet } from '../../portlet/portlet';

declare const AmCharts;

export type SerieItemTypes = 'column' | 'line' | 'area' | 'smoothedLine';
export type AxisPositionTypes = 'right' | 'left';
export type AxisStackTypes = 'none' | 'regular';

// layered-columns -> clustered : false & columnWidth : .5

export interface IV3XYChartSerieItem {
  name: string;
  valueField: string;
  type: SerieItemTypes;
  axis?: string
  hidden?: boolean;
  color?: string; // #hex
  cLabel?: boolean;
  cLabel2?: boolean;
  cBullet?: boolean;
  cBullet2?: boolean;
  // newStack?: boolean;
  clustered?: boolean;
  columnWidth?: number;
}
export interface IV3XYChartAxisItem {
  id: string;
  title: string;
  axisAlpha?: number;
  position?: AxisPositionTypes;
  stackType?: AxisStackTypes;
}

@Component({
  selector: '<rd-amchart-xy-v3>',
  template: `
    <div id="amChartV3" style="width:100%" [style.height.px]="height"></div>
  `
})
export class AmChartXYV3 extends BaseAmChartV3 {
  constructor(zone: NgZone, public element: ElementRef, portlet: Portlet) {
    super(zone, element, portlet);
  }

  @Input("rd-data") data: Array<object> = [];
  @Input("rd-series") series: Array<IV3XYChartSerieItem> = [];
  @Input("rd-axis") axis: Array<IV3XYChartAxisItem> = [{ id: this.ID, title: "", position: "left", axisAlpha: .15, stackType: "none" }];
  @Input("rd-key-field") keyField: string;
  @Input("rd-height") height: number | string = 300;
  @Input("rd-label-rotate") labelRotate: number = 90;

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

  ngDoCheck() {
    if (this.container && this.previousWidth != this.container.clientWidth) {
      this.previousWidth = this.container.clientWidth;
      this.render();
    }
    let amchartLogo = this.jQuery(this.container).find("a");
    if (amchartLogo.length) this.jQuery(amchartLogo).remove();
  }

  ngOnChanges(changes) {
    if (!this.chart) return;

    if (changes.series) this.chart.graphs = this.setSeries();
    if (changes.data) {
      if (!this.chart) this.render();
      else {
        this.chart.dataProvider = this.data;
        this.chart.validateData();
      }
    }
    if (changes.title) this.render();
  }

  ngAfterViewInit() {
    this.zone.runOutsideAngular(() => {
      this.render();
    });
  }

  setSeries() {
    let graphSeries = [];
    if (this.series && this.series.length) {
      for (const i in this.series) {
        let item = this.series[i];
        item.color = item.color || this.colorList[i];

        let serie = {
          balloonText: "<b>[[title]]: [[value]]</b>",
          fillColors: item.color,
          legendColor: item.color,
          lineColor: item.color,
          hidden: item.hidden,
          type: item.type == "area" ? 'line' : item.type,
          title: item.name,
          valueField: item.valueField,
          valueAxis: item.axis,
          showHandOnHover: true,
          connect: false,
          // newStack: !!item.newStack,
          clustered: item.clustered === false ? false : true,
          columnWidth: item.columnWidth,
          negativeFillColors: "#c00",
          negativeLineColor: "#c00"
        };

        switch (item.type) {
          case "line":
            serie["lineThickness"] = 2;
            serie["type"] = "smoothedLine";
            serie["labelText"] = item.cLabel ? "[[label]]" : item.cLabel2 ? "[[label2]]" : "";
            serie["customBulletField"] = item.cBullet ? "customBullet" : item.cBullet2 ? "customBullet2" : "";
            break;
          case "column":
            serie["fillAlphas"] = .9;
            serie["lineAlpha"] = .2;
            serie["labelText"] = item.cLabel ? "[[label]]" : "";
            serie["customBulletField"] = item.cBullet ? "customBullet" : "";
            break;
          case "area":
            serie["fillAlphas"] = .6;
            serie["lineAlpha"] = .4;
            break;
        }
        graphSeries.push(serie);
      }
    }
    return graphSeries;
  }

  render() {
    if (this.container.clientWidth > 0) {
      this.zone.runOutsideAngular(() => {
        this.chart = AmCharts.makeChart(this.container, this.getConfig());
      });
    }
  }

  getConfig() {
    return {
      type: "serial",
      // "depth3D": 10,
      // "angle": 10,
      categoryField: this.keyField,
      theme: "none",
      dataProvider: this.data,
      valueAxes: this.axis,
      graphs: this.setSeries(),
      chartCursor: {
        fullWidth: true,
        cursorAlpha: .1,
        valueLineBalloonEnabled: true
      },
      categoryAxis: {
        gridPosition: "start",
        labelRotation: this.labelRotate
      },
      export: {
        enabled: false
      },
      legend: {
        markerSize: 15,
        periodValueText: "[[value]]"
      },
      titles: [{ text: this.title ? this.title : "" }],
      listeners: [{
        event: "clickGraphItem",
        method: (event) => this.clickEvent.emit(event)
      }]
    }
  }
}