import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { NgxCarousel } from 'ngx-carousel';
import { WebService } from '../../provider/web.service';
import { ImageStorage } from '../../../environments/server.config';
import { Router,ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-orders',
  templateUrl: './orders.component.html',
  styleUrls: ['./orders.component.scss']
})
export class OrdersComponent implements OnInit {

  page: number = 1;
  total_page: number = 1;
  loader:boolean;
  loginDetails:any;
  bookedData: any;
  imageServer: string;
  trend_loader:boolean;
  trendingProductData:any;
  confirmParam: string = '';
  confirmCallBak: string = '';
  
  @ViewChild("confirmModal") public confirmModalRef: ElementRef;

  public carouselTile: NgxCarousel;

  constructor(
    private router        : Router, 
    private route         : ActivatedRoute,
    public webService: WebService,
  ) { 
    this.loader = true;
    this.trend_loader = true;
    this.imageServer  = ImageStorage; 
  }

  ngOnInit() {
    this.checkUserLogin();
    this.getMyOrders();
    this.trendingProducts();
    this.carouselTile = {grid: {xs: 1, sm: 2 , md: 4, lg: 8, all: 0},slide: 1, speed: 400,point: { visible: false },load: 2, touch: true, easing: 'ease', loop: true}
  }
  
  checkUserLogin(){
    this.loginDetails = JSON.parse(this.webService.getLocalStorageItem('userData'));
    if(!this.loginDetails){
      this.goToPage('purchaseHome','');
    }
  }

  getMyOrders(){
    if(!this.loginDetails){
      this.goToPage('purchaseHome','');
    }
    this.loader = true;
    this.webService.post_data('getMyOrders',{"customer_id":this.loginDetails.customer_id,'page':this.page}).subscribe(response => {
      if(response.status == 'success'){
        this.total_page = response.meta.total_pages;
        this.bookedData = response.data;
      } else {
        this.bookedData = false;
      }
      this.loader = false;
    })
  }

  trackOrder(transId){
    this.goToPage('track',{"ref":transId});
  }

  onScroll(){
    if(this.total_page < this.page){
      return false;
    }

    this.page += 1;    
    this.trend_loader = true;
    this.webService.post_data('getMyOrders',{"customer_id":this.loginDetails.customer_id,'page':this.page}).subscribe(response => {
      if(response.status == 'success'){
        let thisObj = this;
        response.data.forEach(function(orderData,key) {
          thisObj.bookedData.push(orderData);
        });
      }
      this.trend_loader = false;
    });
  }

  cancelOrder(params){
    this.loader = true;
    this.webService.post_data('cancelOrder',params).subscribe(response => {
      if(response.status == 'success'){
        this.getMyOrders();
      }
      this.loader = false;
    })
  }

  cnfCancelOrder(odrId){
    if(odrId < 0){
      return false;
    }
    this.showConfirmPopUp('cancelOrder',{"order_id":odrId});
  }

  showConfirmPopUp(fn_name: string, param: any){
    if(fn_name === ''){
      return false;
    }
    if(param){
      param = JSON.stringify(param);
    }
    this.confirmParam = param;
    this.confirmCallBak = fn_name;
    this.confirmModalRef.nativeElement.click();
  }

  confirmCallBack(fn_name: string,param: string){
    if(fn_name === '' || !this[fn_name]){
      return false;
    }
    if(param !== ''){
      param = JSON.parse(param);
      this[fn_name](param);
    } else {
      this[fn_name]();
    }
  }

  trendingProducts(){
    this.trend_loader = true;
    this.webService.get_data('getTrendingPrdts').subscribe(response => {
      if(response.status == 'success'){
        this.trendingProductData = response.data;
      } else {
        this.trendingProductData = false;
      }
      this.trend_loader = false;
    });
  }
  
  latestPrdtDtls(prdt_id){
    this.goToPage('productdetails',{"product_id":prdt_id});
  }

  goToPage(path,data=null){
    this.router.navigate([path],{queryParams:  data});
    document.body.scrollTop  =  document.documentElement.scrollTop  =  0;
  }

  carouselTileLoad(){ return ''; }

}
