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 am4plugins from "@amcharts/amcharts4/plugins/wordCloud";
import am4themes_material from "@amcharts/amcharts4/themes/material";

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

  @Input("rd-text") text: string = "";
  @Input("rd-data") data: Array<string | number> = [];
  @Input("rd-tag-field") tag: string;
  @Input("rd-count-field") count: string;

  chart: am4plugins.WordCloud;
  serie: am4plugins.WordCloudSeries;

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

      this.chart = am4core.create(this.container, am4plugins.WordCloud);
      this.serie = this.chart.series.push(new am4plugins.WordCloudSeries());
    });
  }

  ngOnChanges(changes) {
    if (!this.chart) return;
    if (changes.text) this.setWordCloudText();
    if (changes.data) this.setWordCloudTag();
  }

  setWordCloudText() {
    this.serie.accuracy = 4;
    this.serie.step = 15;
    this.serie.rotationThreshold = 0.7;
    this.serie.maxCount = 200;
    this.serie.minWordLength = 2;
    this.serie.labels.template.margin(4, 4, 4, 4);
    this.serie.maxFontSize = am4core.percent(30);

    this.serie.text = this.text;
    this.serie.labels.template.tooltipText = "{word}: {value}";

    this.serie.colors = new am4core.ColorSet();
    this.serie.colors.passOptions = {};
    this.serie.angles = [0, -90];
    this.serie.fontWeight = "700"
  }

  setWordCloudTag() {
    this.serie.dataFields.word = this.tag;
    this.serie.dataFields.value = this.count;
    this.serie.data = this.data;

    this.serie.labels.template.tooltipText = "{word}: {value}";
    this.serie.colors = new am4core.ColorSet();

    let hoverState = this.serie.labels.template.states.create("hover");
    hoverState.properties.fill = am4core.color("#FF0000");
  }
}