import {Input} from '@angular/core';
import {ScaleLinear} from "d3-scale";
import {ChartHelpers} from "../utilities/chart-helpers";
import * as d3 from "d3";

import {Http} from '@angular/http';

import {ChartBase} from "./chart-base";

export class AreaChartBase extends ChartBase {
  private yData: Array<number>;
  
  protected xScale: ScaleLinear<number, number>;
  
  // Endpoints
  @Input()
  public xEndpoint: string;
  @Input()
  public yEndpoint: string;
  
  // Chart Data
  protected dataSet: Array<Array<number>> = [];
  protected zoomAndPanTarget;
  
  //timing constants
  protected pollingInterval = 200;
  protected changeThreshold = 100;
  
  protected isPlaying = false;
  protected xData: Array<number>;
  
  constructor(protected http: Http) {
    super();
  }
  
  public onInit (xData, yData) {
    super.onInitBase(0, 65535);
    this.xData = xData;
    this.buildXScale();
    this.yData = yData;
    this.buildDataSet();
    ChartHelpers.buildColorGradient(this.svg, this.chartId, this.dataSet);
    ChartHelpers.buildOpacityMask(this.svg, this.chartId);
    this.zoomAndPanTarget = ChartHelpers.buildAreaGraph(this.svg, this.chartId, this.xScale, this.yScale, this.dataSet);
  }
  
  public play () {
    this.isPlaying = true;
    this.takeMeasurement();
  }
  
  public singleStep () {
    this.isPlaying = false;
    this.takeMeasurement();
  }
  
  public pause () {
    this.isPlaying = false;
  }
  
  protected takeMeasurement () {
    this.getYData().subscribe((yData: Array<number>) => {
      let oldMaxY = d3.max(this.yData);
      let newMaxY = d3.max(yData);
      
      if(Math.abs(newMaxY - oldMaxY) > this.changeThreshold) {
        
        this.yData = yData;
        this.buildDataSet();
        
        ChartHelpers.updateAreaGraph(this.svg, this.xScale, this.yScale, this.dataSet);
      }
      
      if (this.pollingInterval > 0 && this.isPlaying) {
        setTimeout(() => {
          this.takeMeasurement();
        }, this.pollingInterval);
      }
    });
  }
  
  protected buildDataSet() {
    this.dataSet = [];
    
    for(let i = 0; i < this.yData.length; i++) {
      this.dataSet.push([
        this.xData[i],
        this.yData[i]
      ]);
    }
  }
  
  protected getXData() {
    return this.http.get(this.xEndpoint)
      .map(response => response.json().wavelengths);
  }
  
  protected getYData() {
    return this.http.get(this.yEndpoint)
      .map(response => response.json().data);
  }
  
  protected buildXScale() {
    this.xScale = d3.scaleLinear()
      .domain([
        d3.min(this.xData),
        d3.max(this.xData)
      ])
      .range([this.innerPadding.left, this._width - this.innerPadding.right]);
  }
}