import { Component, Input, ElementRef, OnChanges } from '@angular/core';
import { BaseHighChart } from "./baseHighChart";
import { Portlet } from "../../portlet/portlet";
import { ScriptLoaderService } from '../../../library/script-loader.service';

declare const Highcharts;

export type ChartTypes = 'pie' | 'column';
export interface IDrillDownAxisItem {
  title: string;
  text: string;
}

@Component({
  selector: 'rd-highchart-drilldown',
  template: `
    <div id="highchart" [style.height.px]="height"></div>
  `
})
export class DrillDown extends BaseHighChart implements OnChanges {
  constructor(element: ElementRef, portlet: Portlet, private script: ScriptLoaderService) {
    super(element, portlet, script);
    this.script.load([
      "./assets/js/highcharts/highcharts.js",
      "./assets/js/highcharts/data.js",
      "./assets/js/highcharts/accessibility.js",
      "./assets/js/highcharts/drilldown.js",
      "./assets/js/highcharts/exporting.js",
      "./assets/js/highcharts/export-data.js"
    ])
  }

  @Input("rd-type") type: ChartTypes = "column";
  @Input("rd-drill-down") drilldown: Array<any> = [];
  @Input("rd-axis") axis: Array<IDrillDownAxisItem> = [{ title: "", text: "" }];
  @Input("rd-series") series: Array<any> = [];
  @Input("rd-stacked") stacked: boolean = false;
  @Input("rd-custom-palette") customPalette: Array<string> = [];

  ngOnChanges(changes) {
    if (changes.series && this.series && this.series.length) this.render();
  }

  render() {
    this.chart = Highcharts.chart(this.container, this.getChartOption());
  }

  getChartOption() {
    return {
      chart: {
        type: this.type,
        zoomType: 'xy'
      },
      title: {
        text: this.title
      },
      accessibility: {
        announceNewData: {
          enabled: true
        }
      },
      xAxis: {
        type: "category",
        crosshair: true
      },
      yAxis: this.axis,
      legend: {
        enabled: true
      },
      plotOptions: {
        series: {
          stacking: this.stacked ? "normal" : null,
          borderWidth: 0,
          dataLabels: {
            enabled: true,
            format: this.type == "pie" ? '{point.name}: {point.y:.1f}' : '{point.y:.1f}'
          },
          showInLegend: true,
          colors: this.customPalette.length ? this.customPalette : Highcharts.getOptions().colors
        }
      },
      tooltip: {
        headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
        pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}</b><br/>',
        shared: true
      },
      series: this.series,
      drilldown: {
        series: this.drilldown
      }
    }
  }
}