import { Component, AfterViewInit, AfterViewChecked } from '@angular/core';
import { NgxChartsModule } from '@swimlane/ngx-charts';
import { single } from './data';
import { single2 } from './data2'
import { HealthProvider } from '../../providers/health/health';
import { Events  } from 'ionic-angular';
/**
 * Generated class for the EventChartComponent component.
 *
 * See https://angular.io/api/core/Component for more info on Angular
 * Components.
 */
@Component({
  selector: 'event-chart',
  templateUrl: 'event-chart.html'
})
export class EventChartComponent implements AfterViewInit,  AfterViewChecked{
    single: any[];
    data: any[];
    multi: any[];

    view: any[] = [700, 400];

    // options
    showXAxis = true;
    showYAxis = true;
    gradient = false;
    showLegend = true;
    showXAxisLabel = true;
    xAxisLabel = 'Country';
    showYAxisLabel = true;
    yAxisLabel = 'Population';
    className = "step1";
    colorScheme = {
        domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA']
    };
    constructor(private hp: HealthProvider, public events: Events) {
        //Object.assign(this, { single })
        this.single = single;
        this.data = single2;
        this.hp.totalCal()
            .subscribe( data => {
                console.log("total cal");
                console.log(JSON.stringify(data));
                let av = data.output[0].total;
                let rv = 21000000 - av;
                //this.data = [{name: "Active Cals", value: av }, {name: "Remain Cals", value: rv }];
                if( av <= 7000000 ) {
                    this.className = 'step1';
                }
                if( av > 7000000  && av <= 14000000 ) {
                    this.className = 'step2';
                }
                console.log("av = ", av);
                if( av > 14000000 ) {
                    this.className = 'step3';
                }
                this.data = [{name: "Active Cals", value: av }];
            } , error => {
                console.log(error);
            });
    }
    ionViewWillEnter() {
        console.log("ENTER");
    }
    ionViewDidLoad() {
        console.log('ionViewDidLoad EventPage');
    }

    onSelect(event) {
				console.log("SeLECT");
        console.log(event);
        this.hp.totalCal()
            .subscribe( data => {
                //console.log("total cal");
                //console.log(JSON.stringify(data));
                let av = data.output[0].total;
                let rv = 21000000 - av;
                //this.data = [{name: "Active Cals", value: av }, {name: "Remain Cals", value: rv }];
                this.data = [{name: "Active Cals", value: av }];
            } , error => {
                console.log(error);
            });
    }
    ngAfterViewInit() {
        //console.log("CALL AGAIN");
    }
    format(data) {
        let r = /,/gi
        //console.log(data.replace(r, ''));
        let n = parseInt(data.replace(r, ''));
        function abbreviateNumber(value) {
            var newValue = value;
            if (value >= 1000) {
                var suffixes = ["", "k", "m", "b","t"];
                var suffixNum = Math.floor( (""+value).length/3 );
                var shortValue;
                for (var precision = 2; precision >= 1; precision--) {
                    shortValue = parseFloat( (suffixNum != 0 ? (value / Math.pow(1000,suffixNum) ) : value).toPrecision(precision));
                    var dotLessShortValue = (shortValue + '').replace(/[^a-zA-Z 0-9]+/g,'');
                    if (dotLessShortValue.length <= 2) { break; }
                }
                var shortNum;
                if (shortValue % 1 != 0)  shortNum = shortValue.toFixed(1);
                newValue = shortValue+suffixes[suffixNum];
            }
            return newValue;
        }
        let v = abbreviateNumber(n);	
        //return (  n / 1000 ) + "k";
        return v;

    }
 ngAfterViewChecked() {
		//console.log("view checked");
  }
}
