import { Component, NgZone, ElementRef, Input, OnChanges, AfterViewInit } 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 IGaugeRangeItem {
  startValue: number;
  endValue: number;
  color: string;
}

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

  @Input("rd-value") value: number;
  @Input("rd-range") ranges: Array<IGaugeRangeItem> = [];
  @Input("rd-show-innerAxis") showInnerAxis = true;
  @Input("rd-show-outAxis") showOutAxis = false;

  chart: am4charts.GaugeChart;
  axis;
  hand;
  label;

  ngAfterViewInit() {
    this.zone.runOutsideAngular(() => {
      this.chart = am4core.create(this.container, am4charts.GaugeChart);
      this.chart.innerRadius = am4core.percent(90);
      this.chart.titles.create().text = this.title;

      this.axis = this.chart.xAxes.push((<any>new am4charts.ValueAxis()));
      this.axis.min = 0;
      this.axis.max = 100;
      this.axis.renderer.innerRadius = 10
      this.axis.strictMinMax = true;
      if (this.showOutAxis) {
        this.axis.renderer.labels.template.radius = 1;
        this.axis.renderer.labels.template.adapter.add("text", (text) => {
          if (text) return text + '%';
        });
      } else {
        this.axis.renderer.labels.template.disabled = true;
        this.axis.renderer.ticks.template.disabled = true;
      }

      this.setRanges();

      let innerAxis = this.chart.xAxes.push((<any>new am4charts.ValueAxis()));
      innerAxis.min = 0;
      innerAxis.max = 100;
      innerAxis.strictMinMax = true;
      innerAxis.renderer.hidden = !this.showInnerAxis;
      innerAxis.renderer.radius = am4core.percent(88);
      innerAxis.renderer.inside = true;
      innerAxis.renderer.line.strokeOpacity = 1;
      innerAxis.renderer.ticks.template.strokeOpacity = 1;
      innerAxis.renderer.ticks.template.length = 10;
      innerAxis.renderer.labels.template.radius = 40;
      innerAxis.renderer.labels.template.adapter.add("text", (text) => {
        return text + '%';
      });

      this.label = this.chart.radarContainer.createChild(am4core.Label);
      this.label.isMeasured = false;
      this.label.fontSize = 25;
      this.label.x = am4core.percent(100);
      this.label.y = am4core.percent(50);
      this.label.horizontalCenter = "middle";
      this.label.verticalCenter = "bottom";

      this.hand = this.chart.hands.push(new am4charts.ClockHand());
      this.hand.axis = this.axis;
      this.hand.innerRadius = am4core.percent(20);
      this.hand.startWidth = 10;
      this.hand.pin.disabled = true;
      this.hand.value = 0;

      this.showValue();

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

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

  setRanges() {
    let colorSet = new am4core.ColorSet();

    for (let i = 0; i < this.ranges.length; i++) {
      let item = this.ranges[i];
      let range = this.axis.axisRanges.create();
      range.value = item.startValue;
      range.endValue = item.endValue;
      range.axisFill.fillOpacity = 1;
      range.axisFill.fill = item.color ? item.color : colorSet.getIndex(i + 2);
    }
  }

  showValue() {
    new am4core.Animation(this.hand, {
      property: "value",
      to: this.value
    }, 1000, am4core.ease.cubicOut).start();
    this.label.text = this.value.toFixed(2);
  }
}