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_animated from "@amcharts/amcharts4/themes/animated";

export interface ITreeMapDataItem {
  name: string;
  value: any;
  children?: Array<any>;
  tooltip?: string;
  iconUrl?: string;
}

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

  @Input("rd-data") data: Array<ITreeMapDataItem> = [];
  @Input("rd-max-levels") maxLevels: number = 1;
  @Input("rd-level-count") levelCount: number = 1;
  @Input("rd-custom-tooltip") customTooltip: boolean = false;
  @Input("rd-first-level-icon") firtLevelIconActive: boolean = true;

  chart: am4charts.TreeMap

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

      this.chart = am4core.create(this.container, am4charts.TreeMap);
      this.chart.data = this.data;

      this.chart.hiddenState.properties.opacity = 0;
      this.chart.maxLevels = this.maxLevels;
      this.chart.dataFields.value = "value";
      this.chart.dataFields.name = "name";
      this.chart.dataFields.children = "children";
      this.chart.dataFields.data = "tooltip";

      this.setSeries();
    });
  }

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

  setSeries() {
    for (let level = 0; level <= this.levelCount; level++) {
      let levelSeriesTemplate = this.chart.seriesTemplates.create(level.toString());
      let columnTemplate = levelSeriesTemplate.columns.template;

      levelSeriesTemplate.strokeWidth = 2;

      let hoverState = columnTemplate.states.create("hover");
      hoverState.adapter.add("fill", function (fill, target) {
        if (fill instanceof am4core.Color) {
          return am4core.color(am4core.colors.brighten(fill.rgb, -0.2));
        }
        return fill;
      });

      if (this.customTooltip) columnTemplate.tooltipHTML = "{data}";

      if (this.firtLevelIconActive && level == 0) {
        let image = columnTemplate.createChild(am4core.Image);
        image.opacity = 0.15;
        image.align = "center";
        image.valign = "middle";
        image.width = am4core.percent(80);
        image.height = am4core.percent(80);

        image.adapter.add("href", function (href, target) {
          let dataItem = target.parent.dataItem;
          if (dataItem) {
            return dataItem["treeMapDataItem"].dataContext.iconUrl;
          }
        });
      }
      else {
        let bullet = levelSeriesTemplate.bullets.push(new am4charts.LabelBullet());
        bullet.locationX = 0.5;
        bullet.locationY = 0.5;
        bullet.label.text = "{name}";
        bullet.label.fill = am4core.color("#ffffff");
      }
    }
  }
}