import { Component, ElementRef, ViewChild } from '@angular/core';
import { Data } from '@angular/router';
import { Chart, registerables } from 'chart.js';
import { DataProviderService } from '../data-provider.service';
import { providerData } from 'src/models/temp.model';
import { Observable } from 'rxjs';
import { IonCheckbox, IonList, LoadingController } from '@ionic/angular';
import { loadingController } from '@ionic/core';
import { async } from '@angular/core/testing';
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  // Importing ViewChild. We need @ViewChild decorator to get a reference to the local variable 
  // that we have added to the canvas element in the HTML template.
  @ViewChild('barCanvas', { static: true }) private barCanvas: ElementRef;
  @ViewChild('doughnutCanvas', { static: true }) private doughnutCanvas: ElementRef;
  @ViewChild('lineCanvas', { static: true }) private lineCanvas: ElementRef;
  public apps = [];
  selectiveItems = [];
  //data = null;
  barChart: any;
  doughnutChart: any;
  lineChart: any;
  checkLabel: string
  showData = [];
  hideBarCharts: boolean
  hidePieCharts: boolean
  hideNotice: boolean
  barLabel: string
  doughnutLabel: string
  a$: Observable<providerData>;
  Pepperoni: IonCheckbox
  constructor(private myDataProvider: DataProviderService, public loadingController: LoadingController) {
    Chart.register(...registerables);
  }
  // getallData(){
  //   this.data$=this.myDataProvider.allData();
  // }
  // When we try to call our chart to initialize methods in ngOnInit() it shows an error nativeElement of undefined. 
  // So, we need to call all chart methods in ngAfterViewInit() where @ViewChild and @ViewChildren will be resolved.

  ionViewDidEnter() {
    var that = this
    this.hideBarCharts=true
    this.hidePieCharts=true
    this.hideNotice=true
    this.initializeChecklist();
    this.func();
    //this.data=this.myDataProvider.getData();
  };

  initializeChecklist() {
    this.checkLabel = "Loading . . ."
    this.myDataProvider.getData(null,null).subscribe(data => {
      var dataJSON: Array<Object>
      dataJSON = JSON.parse(data.toString())
      this.apps = []
      for (var i = 0; i < dataJSON.length; i++) {
        this.apps.push({ val: dataJSON[i]['iden'], isChecked: true });
        this.selectiveItems.push(dataJSON[i]['iden'])
      };
    });
    this.checklistChanged();
  }
  func() {
    //this.a$ = this.myDataProvider.insert(null, null, null, null)
    //console.log(this.a$)

  }
  checklistChanged() {
    this.selectiveItems = []
    for (var i = 0; i < this.apps.length; i++) {
      if (this.apps[i].isChecked) {
        this.selectiveItems.push(this.apps[i].val)
      }
    }
    this.barChartMethod();
    this.doughnutChartMethod();
    console.log(this.selectiveItems)
  }
  barChartMethod() {
    // Now we need to supply a Chart element reference with an object that defines the type of chart we want to use, and the type of data we want to display.
    //var data;
    //console.log(this.myDataProvider.getData())
    var that = this
    this.myDataProvider.getData(null,null).subscribe(data => {
      var dataJSON: Array<Object>
      dataJSON = JSON.parse(data.toString())
      var x = []
      var y = []
      for (var i = 0; i < dataJSON.length; i++) {
        var frame = dataJSON[i];
        console.log(this.selectiveItems.includes(frame['iden']))
        if (this.selectiveItems.includes(frame['iden'])) {
          y.push(frame['all'])
          x.push(frame['iden'])
        }
      };
      //console.log(x)
      //console.log(y)
      if (this.barChart != undefined)
        this.barChart.destroy();
      else {
        for (var i = 0; i < this.apps.length; i++) {
          if (this.apps[i].isChecked) {
            this.selectiveItems.push(this.apps[i].val)
          }
        }
      }
      this.barChart = new Chart(this.barCanvas.nativeElement, {
        type: 'bar',
        data: {
          labels: x,
          datasets: [{
            label: '# of Requests',
            data: y,
            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
          }]
        },
        options: {

        }
      });
    });
  }

  doughnutChartMethod() {
    var that = this

    this.myDataProvider.getData(null,null).subscribe(data => {
      var dataJSON: Array<Object>
      dataJSON = JSON.parse(data.toString())
      if (this.doughnutChart != undefined)
        this.doughnutChart.destroy();
      else {
        for (var i = 0; i < this.apps.length; i++) {
          if (this.apps[i].isChecked) {
            this.selectiveItems.push(this.apps[i].val)
          }
        }
      }
      var camera = 0
      var kTCCServicePhotosAdd = 0
      var location = 0
      var mediaLibrary = 0
      var microphone = 0
      var photos = 0
      var sel = 0
      for (var i = 0; i < dataJSON.length; i++) {
        var frame = dataJSON[i];
        if (this.selectiveItems.includes(frame['iden'])) {
          camera += frame['camera']
          kTCCServicePhotosAdd += frame['kTCCServicePhotosAdd'];
          location += frame['location']
          mediaLibrary += frame['mediaLibrary']
          microphone += frame['microphone']
          photos += frame['photos']
          sel ++
        }
      };
      var dataval = [camera, kTCCServicePhotosAdd, location, mediaLibrary, microphone, photos]
      this.doughnutLabel="Pie chart of "+(camera+kTCCServicePhotosAdd+location+mediaLibrary+microphone+photos)+" requests"
      this.barLabel="Bar chart of "+(camera+kTCCServicePhotosAdd+location+mediaLibrary+microphone+photos)+" requests"
      this.doughnutChart = new Chart(this.doughnutCanvas.nativeElement, {
        type: 'doughnut',
        data: {
          labels: ['cam', 'PhotosAdd', 'gps', 'media', 'mic', 'photos'],
          datasets: [{
            label: '# of Requests',
            data: dataval,
            backgroundColor: [
              'rgba(255, 159, 64, 0.2)',
              'rgba(255, 99, 132, 0.2)',
              'rgba(54, 162, 235, 0.2)',
              'rgba(255, 206, 86, 0.2)',
              'rgba(75, 192, 192, 0.2)'
            ],
            hoverBackgroundColor: [
              '#FFCE56',
              '#FF6384',
              '#36A2EB',
              '#FFCE56',
              '#FF6384'
            ]
          }]
        }
      });
      this.checkLabel = this.apps.length+" entries found, "+sel+" selected."
      if(sel==0){
        this.hideBarCharts=true
        this.hidePieCharts=true
        this.hideNotice=false
      } else if(sel==1){
        this.hidePieCharts=false
        this.hideBarCharts=true
        this.hideNotice=true
      } else {
        this.hidePieCharts=false
        this.hideBarCharts=false
        this.hideNotice=true
      }
    });
  }
  doRefresh(event){
    this.myDataProvider.updateData();
    this.barChartMethod();
    this.doughnutChartMethod();
    setTimeout(() => {
      console.log('Async operation has ended');
      event.target.complete();
    }, 2000);
  }
}