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";

export interface IPyramidDataItem {
  name: string;
  left: number;
  right: number;
  tooltip?: string;
}

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

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

  chartConfigs = [
    { name: "left", chartInstance: null },
    { name: "right", chartInstance: null }
  ];

  ngAfterViewInit() {
    this.zone.runOutsideAngular(() => {
      let mainContainer = am4core.create(this.container, am4core.Container);
      mainContainer.width = am4core.percent(100);
      mainContainer.height = am4core.percent(100);
      mainContainer.layout = "horizontal";

      for (const chart of this.chartConfigs) {
        chart.chartInstance = mainContainer.createChild(am4charts.XYChart);
        chart.chartInstance.paddingLeft = 0;
        chart.chartInstance.data = this.data;

        let categoryAxis = chart.chartInstance.yAxes.push(new am4charts.CategoryAxis());
        categoryAxis.dataFields.category = "name";
        categoryAxis.renderer.grid.template.location = 0;
        categoryAxis.renderer.minGridDistance = 15;
        if (chart.name == "right") categoryAxis.renderer.opposite = true;

        let valueAxis = chart.chartInstance.xAxes.push(new am4charts.ValueAxis());
        valueAxis.min = 0;
        valueAxis.max = 10;
        valueAxis.strictMinMax = true;
        valueAxis.numberFormatter = new am4core.NumberFormatter();
        valueAxis.numberFormatter.numberFormat = "#.#'%'";
        if (chart.name == "left") valueAxis.renderer.inversed = true;

        let series = chart.chartInstance.series.push(new am4charts.ColumnSeries());
        series.dataFields.valueX = chart.name;
        series.dataFields.categoryY = "name";
        series.dataFields.valueXShow = "percent";
        series.dataFields.id = "tooltip";
        series.calculatePercent = true;
        series.sequencedInterpolation = true;
        series.interpolationDuration = 1000;
        if (chart.name == "right") {
          series.fill = chart.chartInstance.colors.getIndex(4);
          series.stroke = series.fill;
        }

        if (this.customTooltip) series.columns.template.tooltipHTML = "{id}";
        else series.columns.template.tooltipText = "{categoryY}: {valueX} ({valueX.percent.formatNumber('#.0')}%)"
      }
    });
  }

  ngOnChanges(changes) {
    if (changes.data) {
      for (const item of this.chartConfigs) {
        if (item.chartInstance) item.chartInstance.data = this.data;
      }
    }
  }
}