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

declare const jQuery;
declare const Highcharts;

@Component({
  selector: 'rd-highchart-sync',
  template: `
    <div id="highchart" [style.height.px]="height"></div>
  `
})
export class SyncCharts 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"
    ]);

    Highcharts.Point.prototype.highlight = function (event) {
      event = this.series.chart.pointer.normalize(event);
      this.onMouseOver();
      this.series.chart.tooltip.refresh(this);
      this.series.chart.xAxis[0].drawCrosshair(event, this);
    };

    // Highcharts.Pointer.prototype.reset = function () {
    //   return undefined;
    // };
  }

  @Input("rd-data") data: Array<object>;
  
  charts = [];
  
  @HostListener('mousemove', ['$event'])
  mousemove(event) {
    Highcharts.addEvent(this.container, event.type, (e) => {
      for (let chart of this.charts) {
        let norm = chart.pointer.normalize(e);
        let point = chart.series[0].searchPoint(norm, true);
        if (point) point.highlight(e);
      }
    });
  }

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

  render() {
    this.charts = [];
    for (let item of this.data) {
      let chartContainer = document.createElement("div");
      jQuery(chartContainer).css("height", this.height / this.data.length);
      jQuery(this.container).append(chartContainer);
      let chart = Highcharts.chart(chartContainer, this.getChartOptions(item));
      this.charts.push(chart);
    }
  }

  getChartOptions(dataset) {
    return {
      chart: {
        marginLeft: 40,
        spacingTop: 20,
        spacingBottom: 20
      },
      title: {
        text: dataset.name,
        align: 'left',
        margin: 0,
        x: 30
      },
      credits: {
        enabled: false
      },
      legend: {
        enabled: false
      },
      xAxis: {
        crosshair: true,
        events: {
          setExtremes: this.syncExtremes
        },
        labels: {
          format: '{value} km'
        }
      },
      yAxis: {
        title: {
          text: null
        }
      },
      tooltip: {
        positioner: function () {
          return {
            x: this.charts[0].chartWidth - 120,
            y: 10
          };
        }.bind(this),
        borderWidth: 0,
        backgroundColor: 'none',
        pointFormat: '{point.y}',
        headerFormat: '',
        shadow: false,
        style: {
          fontSize: '18px'
        },
        valueDecimals: dataset.valueDecimals
      },
      series: [{
        data: dataset.data,
        name: dataset.name,
        type: dataset.type, // line, area, bar
        color: Highcharts.getOptions().colors[Math.floor(Math.random() * 10)],
        fillOpacity: 0.3,
        tooltip: {
          valueSuffix: ' ' + dataset.unit
        }
      }]
    }
  }

  syncExtremes(e) {
    if (e.trigger !== 'syncExtremes') {
      Highcharts.each(this.charts, function (chart) {
        if (chart !== this.chart) {
          if (chart.xAxis[0].setExtremes) {
            chart.xAxis[0].setExtremes(e.min, e.max, undefined, false, { trigger: 'syncExtremes' });
          }
        }
      }.bind(this));
    }
  }
}