import { Component, NgZone, ElementRef, Input, AfterViewInit, OnChanges } from "@angular/core";
import { Portlet } from "../../portlet/portlet";
import { BaseAmChart } from "./baseAmChart";
import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";
import am4themes_dataviz from "@amcharts/amcharts4/themes/dataviz";

export interface IDumbbellPlotDataItem {
  name: string;
  open: number;
  close: number;
  tooltip?: string;
}

@Component({
  selector: "rd-amchart-dumbbell-plot",
  template: `
    <div id="amChart" style="width:100%" [style.height.px]="height"></div>
  `
})
export class AmChartDumbbellPlot extends BaseAmChart implements OnChanges, AfterViewInit {
  constructor(zone: NgZone, public element: ElementRef, portlet: Portlet) {
    super(zone, element, portlet);
  }

  @Input("rd-data") data: Array<IDumbbellPlotDataItem> = [];
  @Input("rd-custom-tooltip") customTooltip: boolean = false;

  chart: am4charts.XYChart

  ngAfterViewInit() {
    this.zone.runOutsideAngular(() => {
      am4core.useTheme(am4themes_dataviz);

      this.chart = am4core.create(this.container, this.dimension == "2D" ? am4charts.XYChart : am4charts.XYChart3D);
      this.chart.data = this.data;

      let categoryAxis = this.chart.xAxes.push(new am4charts.CategoryAxis());
      categoryAxis.renderer.grid.template.location = 0;
      categoryAxis.dataFields.category = "name";
      categoryAxis.renderer.minGridDistance = 15;
      categoryAxis.renderer.grid.template.location = 0.5;
      categoryAxis.renderer.grid.template.strokeDasharray = "1,3";
      categoryAxis.renderer.labels.template.rotation = -90;
      categoryAxis.renderer.labels.template.horizontalCenter = "left";
      categoryAxis.renderer.labels.template.location = 0.5;
      categoryAxis.renderer.inside = true;

      categoryAxis.renderer.labels.template.adapter.add("dx", (dx, target) => {
        return -target.maxRight / 2;
      });

      let valueAxis = this.chart.yAxes.push(new am4charts.ValueAxis());
      valueAxis.renderer.ticks.template.disabled = true;
      valueAxis.renderer.axisFills.template.disabled = true;

      let series = this.chart.series.push(new am4charts.ColumnSeries());
      series.dataFields.categoryX = "name";
      series.dataFields.openValueY = "open";
      series.dataFields.valueY = "close";
      series.dataFields.id = "tooltip";

      if (this.customTooltip) series.tooltipHTML = "{id}";
      else series.tooltipText = "open: {openValueY.value} close: {valueY.value}";

      series.sequencedInterpolation = true;
      series.fillOpacity = 0;
      series.strokeOpacity = 1;
      series.columns.template.width = 0.01;
      series.tooltip.pointerOrientation = "horizontal";

      let openBullet = series.bullets.create(am4charts.CircleBullet);
      openBullet.locationY = 1;

      let closeBullet = series.bullets.create(am4charts.CircleBullet);

      closeBullet.fill = this.chart.colors.getIndex(4);
      closeBullet.stroke = closeBullet.fill;

      this.chart.cursor = new am4charts.XYCursor();

      if (this.export) {
        this.chart.exporting.menu = new am4core.ExportMenu();
        this.setExportMenu();
      }
    });
  }

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