import { Component, OnInit, ViewChild, Input,Output, EventEmitter  } from '@angular/core';
import {Observable} from 'rxjs/Rx';
import { ChartsModule } from 'ng2-charts/ng2-charts';
import { BaseChartDirective } from 'ng2-charts/ng2-charts';
import {Router, ActivatedRoute, Params} from '@angular/router';
import {ContactService} from '../contact.service';
import { FlashMessagesService } from 'angular2-flash-messages';

//import {ResizeEvent} from 'angular-resizable-element';
import {ResizeEvent} from 'angular2-resizable';

@Component({
  selector: 'wizard-step',
  templateUrl: './dash.component.html',
  styleUrls: ['./dash.component.css'],
  providers: [ContactService],
})

export class DashComponent implements OnInit {
  @ViewChild(BaseChartDirective) public chart: BaseChartDirective;
  radio1:any;
  che1:any;
  che2:any;
  che3:any;
  che4:any;
  che5:any;
  lng:any;
  temp:any;
  lat:any;
  temp1:any;
  show: boolean;
  show1: boolean;
  show2: boolean;
  show3: boolean;
  show4: boolean;
  typdev :any;
  new:any;
  neww:any;
  temp2:any;
  temp3:any;
  temp4:any
  humid:any;
  // private dataUrl = 'http://13.126.36.205:3000/mos/getMosChannel'; 
  foo = [
    {value: 'Latitude', viewValue: 'Latitude'},
    {value: 'Time', viewValue: 'Time'},
    
  ];
  foods = [
    {value: 'GPS', viewValue: 'GPS'},
    {value: 'Temprature', viewValue: 'Temprature'},
    {value: 'Humidity', viewValue: 'Humidity'},
  ];
  foodss = [
    {value: 'Map', viewValuee: 'Map'},
    {value: 'Line', viewValuee: 'Line'},
    {value: 'Gauge', viewValuee: 'Gauge'},
  ];
  foodsss = [
    {value: 'Celcius', viewValueee: 'Celcius'},
    {value: 'Fahrenheit', viewValueee: 'Fahrenheit'},
    {value: 'Latitude', viewValueee: 'Latitude'},
  ];
  f = [
    {value: 'Time', viewVal: 'Time'},
    {value: 'Longitude', viewVal: 'Longitude'},,
  ];


 
  constructor(private contactService:ContactService, private activatedRoute: ActivatedRoute,private router: Router,private _flashMessagesService: FlashMessagesService) {
    
   }
   _lineChartData:any;
   public info: string;
   private prevDatasets;
   private datasets = [
     {
       label: "Humidity",
       data: [0, 0, 0, 0, 0, 0]
     }
   ];
 
   private labels = ["","","","","",""];

 
   private options = {
     scales: {
       yAxes: [{
         ticks: {
           beginAtZero: false,
           max: 500,
           min: 0
         }
       }]  
     }
   };
   
    change() {
    
     this.datasets = [{
       label: "Humidity",
       data: []
     }];
     
     this.labels = [];
   }
    
   gengraph(){
    //console.log(); 
   
     if(this.new === "GPS" && this.che3==null || this.che4==null || this.che3==false || this.che4==false )
    {
      if(this.che1==true && this.che2==true && this.new === "GPS" && this.neww=== "Map")
      {
        // console.log("GPS working...");
        this.show = true;
        this.lng =73.8567;
        this.lat =  18.5204;
        
      }
    /*   else{
        console.log("Wrong Credantial for GPS")
        this._flashMessagesService.show('Wrong Credantial for GPS', { cssClass: 'alert-danger', timeout: 2000 });
        
      } */
    } 
     if(this.new === "Temprature")
    {
      if(this.che3==true || this.che4==true)
      {
        if(this.neww === "Gauge")
        {
          if(this.che3==true){
            // console.log("Temp Cel working...")
            //this._flashMessagesService.show('Temprature in Celcius', { cssClass: 'alert-warning', timeout: 2000 });
            
            this.show1 = true;
            this.temp=40;

          }
          else{
           // this._flashMessagesService.show('Temprature in Farenheit', { cssClass: 'alert-warning', timeout: 2000 });            
            this.show1 = true;
            this.temp1= 40;
            this.temp = this.temp1 * 1.8 +32;
          }
        }
        else if(this.neww === "Line" && this.che5 == true)
        {
          if(this.che3==true){
            // console.log("Temp Cel2 working...")
            this.show2 = true;
            //this.temp=40;
            this.clickData_CorrectAnimation()

          }
          else{
            this.show2 = true;
            this.temp1= 40;
            this.clickData_CorrectAnimationn()
            
          }
        }
      }
      else{
        // console.log("Wrong Credantial for Temp")
      }
    }
    else if(this.new === "Humidity" && this.che3 ==true && this.che4 ==true && this.neww === "Line" ){
      this.show3 = true;
      this.clickData_CorrectAnimationnn()
    }
    else if(this.new === "Humidity" && this.che3 ==true && this.neww === "Gauge" ){
      this.show4 = true;
      this.humid=50;
    }
   }

  ngOnInit() {
    this.lng =73.8567;
    this.lat =  18.5204;
    }
    testResponse:any
    clickData_CorrectAnimation(){
    
         
        this.temp1=40;
        
  
         this.temp2 = parseFloat(this.temp1);
         let newData = this.datasets[0].data.slice();
         newData.shift();
         newData.push(this.temp2);
         
         this.datasets = [{
           label: "Temprature",
           data: newData
         }];
  
            
      
        }
        clickData_CorrectAnimationn(){
          
               
              this.temp1=40;
        
               this.temp3 = this.temp1 * 1.8 +32;
               let newData = this.datasets[0].data.slice();
               newData.shift();
               newData.push(this.temp3);
               
               this.datasets = [{
                 label: "Temprature",
                 data: newData
               }];
        
                  
            
              }
              clickData_CorrectAnimationnn(){
                
                this.temp4=50;
                
                     
                       let newData = this.datasets[0].data.slice();
                       newData.shift();
                       newData.push(this.temp4);
                       
                       this.datasets = [{
                         label: "Humidity",
                         data: newData
                       }];
                
                
                        
                  
                    }
    
    }

                                 
