import { Component, OnInit, NgModule } from '@angular/core';
import { StorageService } from 'src/app/services/storage.service';
import { LoadAlertsService } from 'src/app/services/load-alerts.service';
import {  UserService } from 'src/app/services/user.service';
import { NgCircleProgressModule } from 'ng-circle-progress';
import { BehaviorSubject } from 'rxjs';
import { MenuController } from '@ionic/angular';



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


export class SpeedPage implements OnInit {

  consumptionData: any;
  percentage: any;
  dailyQuota: any;
  planName: any;
  price: any;
  subscription_status: any;

  // public _plans = [
  //   {
  //     planId : '1',
  //     planName: '2 Mbps',
  //     daily_quota: 6,
  //     price: '40000 LBP',
  //     download: '10M',
  //     upload: '10M'
  //   },
  //   {
  //     planId : '2',
  //     planName: '4 Mbps',
  //     daily_quota: 10,
  //     price: '50000 LBP',
  //     download: '10M',
  //     upload: '10M'
  //   },
  //   {
  //     planId : '3',
  //     planName: '6 Mbps',
  //     daily_quota: 12,
  //     price: '60000 LBP',
  //     download: '10M',
  //     upload: '10M'
  //   },
  //   {
  //     planId : '4',
  //     planName: '8 Mbps',
  //     daily_quota: 14,
  //     price: '75000 LBP',
  //     download: '10M',
  //     upload: '10M'
  //   },
  //   {
  //     planId : '5',
  //     planName: '10 Mbps',
  //     daily_quota: 16,
  //     price: '100000 LBP',
  //     download: '10M',
  //     upload: '10M'
  //   },
  //   {
  //     planId : '6',
  //     planName: '12 Mbps',
  //     daily_quota: 18,
  //     price: '125000 LBP',
  //     download: '10M',
  //     upload: '10M'
  //   },
  //   {
  //     planId : '7',
  //     planName: '15 Mbps',
  //     daily_quota: 20,
  //     price: '150000 LBP',
  //     download: '10M',
  //     upload: '10M'
  //   },
  //   {
  //     planId : '8',
  //     planName: '20 Mbps',
  //     daily_quota: 25,
  //     price: '200000 LBP',
  //     download: '10M',
  //     upload: '10M'
  //   }
  //  ]

  constructor(private storage:StorageService,
    private loadalert:LoadAlertsService,
    private userService:UserService,
    private menuCtrl: MenuController) { }

  ngOnInit() {
    this.storage.get("lang").then(data=>{console.log(data,'lang');
    this.lang=data;
    this.loadConsumption();

    if(data==2)
    {
      document.dir='rtl'
    }
    else
      {
          document.dir='ltr'
      } 
},
  error=>{console.log(error,'langError');});

    
   
  }
  
  onOpenMenu() {
    this.menuCtrl.enable(true);
    this.menuCtrl.toggle("first");
  }

loadConsumption () {
   // console.log(body)
   console.log('speedlang',this.lang);
   this.loadalert.presentLoading(this.lang==1?"Please Wait.":"Please Wait.");
   this.userService.getConsumption(this.lang).subscribe(data=>{
     console.log(data.subscription_status);
      this.subscription_status = data.subscription_status;
     if(this.subscription_status==1){
        this.consumptionData = data.info;
        let planId = this.consumptionData.plan_id;

        this.userService.getPackages(this.lang).subscribe(datapack=>{
          console.log(datapack.services_info[planId]);
          this.planName= datapack.services_info[planId].speed;
          this.dailyQuota = datapack.services_info[planId].daily_limit;
          this.price = datapack.services_info[planId].price;
        });

       
       // = this._plans[planId].daily_quota;
        this.percentage = this.consumptionData.percentage;
    }
    else if(this.subscription_status==0) {
      console.log('unsubscribed');
      this.planName = data.quota;
      this.percentage = data.percentage;
    }
      //this.percentage = 70;
     // console.log(consumption3);
    // {{ planConsumption(consumptionData.plan_id,consumptionData.consumption) }}

     this.loadalert.dismissLoading();
    
   },error=>{

    this.loadalert.PresentAlert("","Attention",'Error in connection.');
    //this.loadalert.PresentAlert("","Attention",'This user does not have subscription yet.');
    this.loadalert.dismissLoading();
     console.log(error,"error");
   })
}
  lang;
  get Lang(){
    return this.lang;
  }
  ionViewWillEnter(){
    this.storage.get('lang').then(data=>{
      this.lang=data;
    },
      error=>{
  console.log(error,'error');
      });
  }

  openMenu(evt) {
    //console.log(evt);
    if(evt === "main"){
       this.menuCtrl.enable(true, 'menu1');
       this.menuCtrl.enable(false, 'menu2');
    }else{
       this.menuCtrl.enable(true, 'menu2');
       this.menuCtrl.enable(false, 'menu1');
    }
    this.menuCtrl.toggle();
  }


  // planName(index) {
  //   return this._plans[index].planName;
  // }

  // planDailyQuota(index) {
  //   return this._plans[index].daily_quota;
  // }

  // planDownload(index) {
  //   return this._plans[index].download;
  // }

  // planUpload(index) {
  //   return this._plans[index].upload;
  // }

  // planPrice(index) {
  //   return this._plans[index].price;
  // }
  

  get_percentage() {
   
    return this.percentage;
  }

  doRefresh(event) {
    console.log('Begin async operation');

    setTimeout(() => {
      console.log('Async operation has ended');
      event.target.complete();
    }, 2000);
  }
  
}