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

@Component({
  selector: 'rd-polar-chart',
  template: `
    <div id="dxElement" style="width:100%"></div>
  `
})
export class PolarChart extends BaseChart implements OnChanges {
  @Input("rd-title") title: string;
  @Input("rd-type") type: string = "line" // line, area, scatter
  @Input("rd-argument-field") argumentField: string;
  @Input("rd-series") series: Array<IDevChartSerieItem> = [{ valueField: '', name: '' }];
  @Input("rd-data") data: Array<object> = [];
  @Input("rd-use-spider-web") useSpiderWeb: boolean = true;
  @Input("rd-enabled-legends") enabledLegends: Array<number> = [];

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

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

  ngDoCheck() {
    if (this.container && this.previousWidth != this.container[0].clientWidth) {
      this.previousWidth = this.container[0].clientWidth;
      if (this.data) 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.dxPolarChart(this.getChartOptions());
      this.dxElement = this.container.dxPolarChart('instance');
      this.dxElement.render();
    }
  }

  private getChartOptions() {
    var legendClicked = false;
    return {
      dataSource: this.data ? this.data : [],
      useSpiderWeb: this.useSpiderWeb,
      series: this.series,
      commonSeriesSettings: {
        type: this.type,
        argumentField: this.argumentField
      },
      animation: {
        duration: 1000,
        easing: "easeOutCubic",
        enabled: true,
        maxPointCountSupported: 300
      },
      export: { enabled: this.export },
      title: {
        text: this.title,
        font: { size: 14 }
      },
      tooltip: {
        enabled: true,
        location: "edge",
        paddingLeftRight: 12,
        paddingTopBottom: 6,
        font: {
          color: "gray",
          opacity: 1,
          size: 12
        },
        zIndex: 9999999999999,
        customizeTooltip: function (arg) {
          var tooltip = "<span style='font-size: 12px; font-weight: 600; color:#4BACC6;'>" + arg.argument + "</span>" + " : " + arg.value;
          return { text: tooltip };
        }.bind(this)
      },
      onLegendClick: function (e) {
        var series = e.target;
        legendClicked = true;
        if (series.isVisible()) {
          series.hide();
        } else {
          series.show();
        }
      },
      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),
    }
  }
}