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

@Component({
  selector: 'app-purchase-home',
  templateUrl: './purchase-home.component.html',
  styleUrls: ['./purchase-home.component.scss']
})
export class PurchaseHomeComponent implements OnInit {
  public carouselTile: NgxCarousel;
  
  page: number = 1;
  loader:boolean;
  total_page: number = 1;
  imageServer: any;
  trend_loader:boolean;
  latestProductData:any;
  trendingProductData:any;
  loginDetails:any;

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

  value: number = 40;
  highValue: number = 60;
  options: Options = {
    floor: 0,
    ceil: 100
  };

  ngOnInit() {
    this.route.queryParams.subscribe(params => {
      let payStatus = params['status'];

      if(payStatus && payStatus !=''){
        if(payStatus == 'failure')
          this.failureModelRef.nativeElement.click();
      }
    });
    this.unsetProdDetails();
    this.getLatestProducts();
    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, loop: true}
  }

  unsetProdDetails(){
    this.webService.removeLocalItem('productDetails');
  }

  getLatestProducts(){
    this.loader = true;
    this.webService.get_data('getLatestPrdts').subscribe(response => {
      if(response.status == 'success'){
        this.latestProductData = response.data;
      } else {
        this.latestProductData = false;
      }
      this.loader = false;
    });
  }

  trendingProducts(){
    this.trend_loader = true;
    this.webService.post_data('getTrendingPrdts',{'page':this.page}).subscribe(response => {
      if(response.status == 'success'){
        this.total_page = response.meta.total_pages;
        this.trendingProductData = response.data;
      } else {
        this.trendingProductData = false;
      }
      this.trend_loader = false;
    });
  }

  latestPrdtDtls(prdt_id){
    this.goToPage('productdetails',{"product_id":prdt_id});
  }

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

    this.page += 1;    
    this.trend_loader = true;
    this.webService.post_data('getTrendingPrdts',{'page':this.page}).subscribe(response => {
      if(response.status == 'success'){
        let thisObj = this;
        response.data.forEach(function(trendData,key) {
          thisObj.trendingProductData.push(trendData);
        });
      }
      this.trend_loader = false;
    });
  }

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

  carouselTileLoad(){ return ''; }

}
