import { Component, OnInit, Input, ViewChild, ElementRef } from '@angular/core';
import { Measurement } from '../api/models';
import { Chart } from 'chart.js';

@Component({
  selector: 'app-chart',
  templateUrl: './chart.component.html',
  styleUrls: ['./chart.component.css']
})
export class ChartComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  private tempChart: Chart;
  private dayOfWeek: string;
  private currDate: string;
  private currYear: string;
  private chartType: string;

  @Input()
  set setChartType(type: string) {
    this.chartType = type;
  }

  @Input()
  set setMeasurements(measurements : Measurement[]) {
    this.setTempChart(measurements);
  }

  setTempChart(measurements: Measurement[]): any {
    //set data
    if(measurements == null)
      return;

    var arrays = this.setArrays(measurements);

    // if(measurements.length == 0)
    //   return;

    this.context = (<HTMLCanvasElement>this.myCanvas.nativeElement).getContext('2d');

    console.log(this.context)
    this.tempChart = new Chart(this.context, {
      type: 'line',
      data: {
        labels: arrays.timeArray,
        datasets: [{
          data: arrays.valArray,
          borderColor: 'rgba(42, 161, 152, 1)',
          backgroundColor: '#184048',
          pointBackgroundColor: '#184048',
          label: this.chartType
        }]
      }
    })
  }

  @ViewChild('chartCanvas') myCanvas: ElementRef;
    public context: CanvasRenderingContext2D;

  getDayOfWeek(date) {
    var dayOfWeek = new Date(date).getDay();
    return isNaN(dayOfWeek) ? null : ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][dayOfWeek];
  }

  setArrays(ms : Measurement[])  {
    var timeArray = [];
    var valArray = [];
      ms.forEach(m => {
        var slicedtime = m.Timestamp.slice(m.Timestamp.indexOf('T')+1, m.Timestamp.length-1);

        timeArray.push(slicedtime.substr(0, 5));
        valArray.push(m.Value);
      });

    return {timeArray: timeArray, valArray: valArray}
  }

}