import { Component, NgZone, ElementRef, Input, Output, EventEmitter, 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 IPieDataItem {
  keyField: string;
  valueField: string;
  tagField?: string;
}

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

  @Input("rd-data") data: Array<IPieDataItem> = [];
  @Input("rd-key-field") keyField: string;
  @Input("rd-value-field") valueField: string;
  @Input("rd-tag-field") tagField: string;
  @Input("rd-legend-enabled") legendEnabled: boolean = true;
  @Input("rd-custom-palette") customPalette: boolean = true;

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

  chart: am4charts.PieChart3D

  ngAfterViewInit() {
    this.zone.runOutsideAngular(() => {
      if (this.customPalette) am4core.useTheme(this.custom_am4theme);
      else am4core.useTheme(am4themes_dataviz);

      this.chart = am4core.create(this.container, am4charts.PieChart3D);
      this.chart.hiddenState.properties.opacity = 0;
      this.chart.data = this.data;
      this.chart.titles.create().text = this.title;

      let series = this.chart.series.push(new am4charts.PieSeries3D());
      series.dataFields.value = this.valueField;
      series.dataFields.category = this.keyField;

      series.ticks.template.disabled = true;
      series.labels.template.disabled = true;
      series.alignLabels = false;
      series.labels.template.text = "{value.percent.formatNumber('#.0')}%";
      series.labels.template.radius = am4core.percent(-40);
      series.labels.template.fill = am4core.color("white");
      series.slices.template.cursorOverStyle = am4core.MouseCursorStyle.pointer;

      let hv = series.slices.template.states.getKey("hover");
      hv.properties.opacity = .9;

      series.labels.template.adapter.add("radius", (radius, target) => {
        if (target.dataItem && (target.dataItem.values.value.percent < 10)) {
          return 0;
        }
        return radius;
      });

      series.labels.template.adapter.add("fill", (color, target) => {
        if (target.dataItem && (target.dataItem.values.value.percent < 10)) {
          return am4core.color("#000");
        }
        return color;
      });

      series.slices.template.events.on("hit", (e) => {
        this.clickEvent.emit(e.target.dataItem.dataContext[this.tagField]);
      });

      if (this.legendEnabled) {
        this.chart.legend = new am4charts.Legend();
        this.chart.legend.labels.template.maxWidth = 150;
        this.chart.legend.labels.template.truncate = true;
      }
      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;
  }
}