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

@Component({
  selector: 'app-productlist',
  templateUrl: './productlist.component.html',
  styleUrls: ['./productlist.component.scss']
})
export class ProductlistComponent implements OnInit {
  loader: boolean;
  searchKey:string;
  imageServer: any;
  productArray: any[] = new Array();
  productBrand: any;
  brandArr: any[] = new Array();
  sliderMinvalue: number;
  sliderhighValue: number;
  slideroptions: Options;
  page: number = 1;
  total_page: number = 1;
  filterParam: any = new Array();

  constructor(
    private router        : Router, 
    private route         : ActivatedRoute,
    public webService     : WebService
  ){ 
    this.loader = true;
    this.productArray = [];
    this.filterParam = {"key":'',"brand_id":Array(),"minPrice":'',"maxPrice":'','page':1};
    this.imageServer = ImageStorage;
    
    route.params.subscribe(val => {
      this.route.queryParams.subscribe(params => {
        this.searchKey = params['key'];
        this.filterParam.key = this.searchKey;
        this.filterParam.page = this.page;
        this.getProductDetails(this.filterParam);
      });
    });
    if(this.searchKey == ''){
      this.goToPage('purchaseHome','');
    }
  }
  
  public scrollbarOptions = { axis: 'y', theme: 'minimal-dark' };

  ngOnInit() {
    this.getBrand();
  }

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

  getProductDetails(params:any = Array()){
    this.loader = true;
    this.webService.post_data('productSearch',params).subscribe(response => {
      if(response.status == 'success'){
        this.total_page = response.meta.total_pages;
        if(params.page == 1){
          this.productArray = response.data;
        } else {
          let thisObj = this;
          response.data.forEach(function(product,key) {
            thisObj.productArray.push(product);
          });
        }

      } else {
        this.productArray = [];
      }
      this.loader = false;
    });
  }

  getBrand(){
    this.webService.get_data('getBrands').subscribe(brandResponse => {
      if(brandResponse.status == 'success'){
        this.productBrand = brandResponse.brands;
        this.sliderMinvalue = 0;
        this.sliderhighValue = brandResponse.maxamount;
        this.slideroptions = { floor: 0, ceil: brandResponse.maxamount, step: 100 };
      }
    });
  }

  onScroll(){
    if(this.total_page == this.page){
      return false;
    }
    this.page += 1;
    this.filterParam.page = this.page;
    this.getProductDetails(this.filterParam);
  }

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

  selectBrand(event,brand_id){
    if (event.target.checked) {
      this.brandArr.push(brand_id);
    } else {
      let id = this.brandArr.findIndex(x => x == brand_id);
      if (id != -1) {
        this.brandArr.splice(id, 1);
      }
    }
    this.page = 1;
    this.filterParam.page = this.page;
    this.filterParam.brand_id = this.brandArr;
    this.getProductDetails(this.filterParam);
  }

  getPrice(low,top){
    this.page = 1;
    this.filterParam.page = this.page;
    this.filterParam.minPrice = low;
    this.filterParam.maxPrice = top;
    this.getProductDetails(this.filterParam);
  }
}
