import { Component, OnInit, ViewChild,OnChanges } from '@angular/core';
import { ChartOptions, ChartType, ChartDataSets } from 'chart.js';
import { Label, BaseChartDirective } from 'ng2-charts';

import { Plant } from 'src/app/models/plant';
import { Organization } from '@app/models/organization';


import { MeasuresService } from 'src/app/services/measures.service';
import { PlantsService } from 'src/app/services/plants.service';
import { AssetsService } from 'src/app/services/assets/assets.service';
import { LogsService } from 'src/app/services/logs.service';

import { OrganizationsService } from '@app/services/organizations.service';

import { ActivatedRoute } from '@angular/router';
import { Observable, forkJoin } from 'rxjs';


import * as moment from 'moment';

import Swal from 'sweetalert2';
import { environment } from '@environments/environment';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-assets',
  templateUrl: './assets.component.html',
  styleUrls: ['./assets.component.scss']
})


export class AssetsComponent implements OnInit {
 
  title = "Plantas";

  organizationId:string;
  listAssets:any;
  listEnergyProduced:any;
  error:boolean;
  errorMessage:string;

  // For chartjs
  tsLabels: any[];
  polarLabels: any[];
  serieA: any[];
  serieB: any[];
  serieC: any[];
 
  public barChartType: ChartType;
  public barChartLegend:boolean;
  public barChartLabels: Label[];
  public barChartOptions: ChartOptions;
  public barChartData: ChartDataSets[];

  isActive:[boolean,boolean,boolean,boolean]; // Tipo de parámetro activado?
  selectedMeasureType = 'Voltaje'; // Medidores


  constructor(
    private orgService: OrganizationsService, 
    private route: ActivatedRoute, 
    private plantsService: PlantsService,
    private assetService: AssetsService,
    private http: HttpClient,
    private logsService: LogsService,
    private measService: MeasuresService) {
      
      Swal.fire({
        allowOutsideClick: false,
        type: 'info',
        text: 'Espere por favor...'
      });
      Swal.showLoading();
      
  }

  @ViewChild("baseChart",null) chart: BaseChartDirective;

  ngOnInit() {
    
    let plants = this.plantsService.getAssets();
    let energy_produced = this.plantsService.getAssetsProducedEnergy();

    forkJoin([plants, energy_produced]).subscribe(results => {
      this.listAssets = results[0]["assets"];
      this.listEnergyProduced = results[1];   
      //this.route.queryParams.subscribe(params => {
        //this.organizationId = params['id'];
        //console.log(this.organizationId); // Print the parameter to the console.
      //});
      Swal.close();
    },
    (err) => {
      Swal.fire({
        type: 'error',
        title: 'Error en el servidor',
        text: "No su pudo obtener la informacion"
      });
    });

    this.barChartLegend = true;
    this.barChartOptions = {
      responsive: true,
      scales: {
        xAxes: [{
          stacked: true
        }],
        yAxes: [{
          stacked: true
        }]
      }
    };
    this.isActive = [false, false, true, false];
    this.onMeasureClickMonth();
  }
 
  getAllAssetData(): void {
    console.log("i get here :P");
  }

  isSelected(){
    if(this.organizationId!=undefined){
      return true;
    }
    else{
      return false;
    }
  }


  public onMeasureClickDay(): void {
    this.chart.chart.destroy;

    this.isActive = [true, false, false, false];
    this.chart.datasets = [
      {
       
				label: 'Dataset 1',
				data: [
					11,
					13,
					8,
					10,
					7,
					6,
          9,
          12,
          9,
          9,
          5,
          20
				]
			}, {
				label: 'Dataset 2',
				data: [
					11,
					22,
					10,
					6,
					7,
					3,
          15,
          12,
          12,
          14,
          9,
          5
				]
			}, {
				label: 'Dataset 3',
				data: [
					8,
					6,
					20,
					11,
					20,
					13,
          9,
          11,
          13,
          7,
					3,
					15
				]
			}

      //{ data: this.serieA, label: this.selectedMeasureType + ' A', fill: false, lineTension: 0},
      //{ data: this.serieB, label: this.selectedMeasureType + ' B', fill: false, lineTension: 0},
      //{ data: this.serieC, label: this.selectedMeasureType + ' C', fill: false, lineTension: 0}
    ];
    this.tsLabels = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'];
    this.chart.labels = this.tsLabels;
    this.chart.chartType  = 'line';
    this.chart.ngOnInit();

  }

  public onMeasureClickWeek(): void {
    
    this.chart.chart.destroy;
    Swal.fire({
      allowOutsideClick: false,
      type: 'info',
      text: 'Espere por favor...'
    });
    Swal.showLoading();

    setTimeout(()=>{ 
      this.isActive = [false, true, false, false];
  
      this.logsService.getEnergyProducedByWeek().subscribe(res => {
        this.barChartLabels = res["7D"].map(obj => obj.dateMax).reverse();
        this.serieA = res["7D"].map(obj => obj.total_energy_kWh).reverse();
      
        this.barChartData = [
          { data: this.serieA, label: "Total", fill: false, lineTension: 0},
        ];
      
      });
      
      this.chart.chartType  = 'bar';
      this.chart.ngOnInit();
      
      Swal.close();
    }, 2000);


    


    /*
    this.chart.chart.destroy;

    this.isActive = [false, true, false, false];

    this.barChartData = [
      {
       
				label: 'Dataset 1',
				data: [
					11,
					10,
					7,
					9,
          12,
          5,
          20
				]
			}, {
				label: 'Dataset 2',
				data: [
					22,
					10,
					6,
          12,
          14,
          9,
          5
				]
			}, {
				label: 'Dataset 3',
				data: [
					8,
					20,
          11,
          13,
          7,
					3,
					15
				]
			}
      

      //{ data: this.serieA, label: this.selectedMeasureType + ' A', fill: false, lineTension: 0},
      //{ data: this.serieB, label: this.selectedMeasureType + ' B', fill: false, lineTension: 0},
      //{ data: this.serieC, label: this.selectedMeasureType + ' C', fill: false, lineTension: 0}
    ];

    this.tsLabels = ['10/09/2019', '11/09/2019', '12/09/2019', '13/09/2019', '14/09/2019', '15/09/2019', '16/09/2019']; */
   
  }

  public onMeasureClickMonth(): void {
    
    if (this.chart.data != undefined){
      this.chart.chart.destroy;
    }

    this.isActive = [false, false, true, false];

    this.barChartData = [
      {
       
				label: 'Dataset 1',
				data: [
					11,
					13,
					8,
					10,
					7,
					6,
          9,
          12,
          9,
          9,
          5,
          20
				]
			}, {
				label: 'Dataset 2',
				data: [
					11,
					22,
					10,
					6,
					7,
					3,
          15,
          12,
          12,
          14,
          9,
          5
				]
			}, {
				label: 'Dataset 3',
				data: [
					8,
					6,
					20,
					11,
					20,
					13,
          9,
          11,
          13,
          7,
					3,
					15
				]
			}

      //{ data: this.serieA, label: this.selectedMeasureType + ' A', fill: false, lineTension: 0},
      //{ data: this.serieB, label: this.selectedMeasureType + ' B', fill: false, lineTension: 0},
      //{ data: this.serieC, label: this.selectedMeasureType + ' C', fill: false, lineTension: 0}
    ];
    this.tsLabels = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'];
    this.barChartLabels = this.tsLabels;
    this.barChartType  = 'bar';
    //this.chart.ngOnInit();
  }

  public onMeasureYear(): void {
    this.chart.chart.destroy;

    this.isActive = [false, false, false, true];

    this.barChartData = [
      {
       
				label: 'Dataset 1',
				data: [
					11,
					13,
					8,
					10,
					7,
					6,
          9,
          12,
          9,
          9,
          5,
          20
				]
			}, {
				label: 'Dataset 2',
				data: [
					11,
					22,
					10,
					6,
					7,
					3,
          15,
          12,
          12,
          14,
          9,
          5
				]
			}, {
				label: 'Dataset 3',
				data: [
					8,
					6,
					20,
					11,
					20,
					13,
          9,
          11,
          13,
          7,
					3,
					15
				]
			}

      //{ data: this.serieA, label: this.selectedMeasureType + ' A', fill: false, lineTension: 0},
      //{ data: this.serieB, label: this.selectedMeasureType + ' B', fill: false, lineTension: 0},
      //{ data: this.serieC, label: this.selectedMeasureType + ' C', fill: false, lineTension: 0}
    ];

    this.tsLabels = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'];
    this.barChartLabels = this.tsLabels;
    this.barChartType  = 'bar';
    this.chart.ngOnInit();
  }

}
