import { Component, OnInit } from '@angular/core';
import { FlashMessagesService } from 'angular2-flash-messages';
import { ContactService } from '../../contact.service';

declare var Chart :any;

@Component({
  selector: 'app-tempreture-graph',
  templateUrl: './tempreture-graph.component.html',
  styleUrls: ['./tempreture-graph.component.scss']
})
export class TempretureGraphComponent implements OnInit {
  dataSelect: any;
  Load : Boolean = false;
  Fromdate = new Date();
  todate=new Date();
  useridd: any;
  options: any=[];
  option:any;
  emailid: any;
  devicesss: any;
  finall: any;
  identifier : any= "temp_report_graph"; 
  

  constructor(private contactService:ContactService,private _flashMessagesService: FlashMessagesService) { }

  ngOnInit() {
    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
  }

  flag:boolean = false;
  InsertionTime = [];
  fuelGraphData = [];
  fuelVoltage = [];

  getGraphData(){
    this.InsertionTime=[];
    this.fuelGraphData=[];
    this.fuelVoltage = [];
   
    console.log(this.dataSelect);
    if((this.deviceArr == undefined)||(this.deviceArr.length == 0)){
    return  this._flashMessagesService.show("Select Device First", { cssClass: 'alert-danger', timeout: 2000 });
    }else{
      var dID = this.deviceArr[0];
    }
    var fDate = this.Fromdate.toISOString();
    var tDate = this.todate.toISOString();
    this.Load = true;
    this.contactService.fuelReportData(dID,fDate,tDate)
      .subscribe(res=>{
        this.Load  = false;
        let graphData=res
        console.log("graphData",res);
        if(graphData.length != 0){
          this.flag = true;
        }
        for(var i=graphData.length-1; i>=0;i--){
          var fuelData = graphData[i].currentFuel?graphData[i].currentFuel:0;
          var voltageData = graphData[i].fuelVoltage?parseFloat(graphData[i].fuelVoltage)/1000:0;
          this.fuelVoltage.push(voltageData);
          this.fuelGraphData.push(fuelData);
          var iTime = new Date(graphData[i].insertionTime).toLocaleString();
          this.InsertionTime.push(iTime)
        }

        // this.getgraphoption();
        this.dataToPlot();
     
      
      },err=>{
        this.Load  = false;
      })
  }
   fuelChart:any;
  dataToPlot(){
  
    if(this.fuelChart != undefined){
      this.fuelChart.destroy();
    }
    this.fuelVoltage
    this.fuelGraphData
    this.InsertionTime
  
    var that = this;
    var canvas = <HTMLCanvasElement> document.getElementById("fuelChart");
    var ctx = canvas.getContext("2d");

     this.fuelChart = new Chart(ctx, {
      type: 'line',
      data: {
          labels: this.InsertionTime,
          datasets: [{
              label: 'Temprature',
              data: this.fuelGraphData,
              backgroundColor: [
                  'rgba(255, 99, 132, 0.2)',
                  'rgba(54, 162, 235, 0.2)',
                  'rgba(255, 206, 86, 0.2)',
                  'rgba(75, 192, 192, 0.2)',
                  'rgba(153, 102, 255, 0.2)',
                  'rgba(255, 159, 64, 0.2)'
              ],
              borderColor: [
                  'rgba(255, 99, 132, 1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(75, 192, 192, 1)',
                  'rgba(153, 102, 255, 1)',
                  'rgba(255, 159, 64, 1)'
              ],
              borderWidth: 1
          },
          {
            label: 'Voltage',
            data: this.fuelVoltage,
            backgroundColor: [
              'rgba(73,188,170,0.4)'
            ],
            borderColor: [
              'rgba(73,188,170,1)',
             
            ],
            borderWidth: 1
        }
         ]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
          scales: {
              yAxes: [{
                  ticks: {
                      beginAtZero: true
                  }
              }]
          }
      }
  });




  }

  deviceArr=[];

  getReport(event){
   
      var deviceId: any;
      var tpdata = event ; 
      var that = this;
      var fd = new Date(tpdata.fromDate);
      var td  = new Date(tpdata.toDate);
      
      if(event.deviceArr.length==0){
        deviceId=[];
      }else{
        deviceId= event.deviceArr;
      }
      this.deviceArr = deviceId; 
      console.log('this.deviceArr',this.deviceArr);
      
      this.Fromdate = fd;
      this.todate = td;
      console.log("b4");
     
  
     
     
      this.getGraphData();
        
  
   
  }
  

}
