import { Component, OnInit } from '@angular/core';
import { Router,ActivatedRoute } from '@angular/router';
import { WebService } from '../../provider/web.service';
import { NgxGalleryOptions, NgxGalleryImage, NgxGalleryAnimation } from 'ngx-gallery';
import * as $ from 'jquery';
import { NgxCarousel } from 'ngx-carousel';
import { ImageStorage } from '../../../environments/server.config';
import { Options } from 'ng5-slider';

interface RangeSliderModel {
  minValue: number;
  maxValue: number;
  options: Options;
}

@Component({
  selector: 'app-track',
  templateUrl: './track.component.html',
  styleUrls: ['./track.component.scss']
})
export class TrackComponent implements OnInit {
  ref_id:any;
  count:any;
  loginDetails:any;
  loader:boolean;
  imageServer: string;
  orderDetails:any;
  galleryOptions: NgxGalleryOptions[];
  galleryImages: NgxGalleryImage[];

  public carouselTile: NgxCarousel;
    constructor(private router        : Router, 
                private route         : ActivatedRoute,
                public webService     : WebService){
      this.count = 0;
      this.loader =true;
      this.imageServer  = ImageStorage; 
    }
    
    ngOnInit(): void {
      this.route.queryParams.subscribe(params => {
        let payStatus = params['status'];
        this.ref_id = params['ref'];
  
        if(payStatus && payStatus !=''){
          if(payStatus == 'success'){
            if(this.ref_id > 0){
              this.getOrderDetail();
            }
          }
        }
      });
      this.designModule();
      this.checkUserLogin();
      this.unsetProdDetails();
    }

    checkUserLogin(){
      this.loginDetails = JSON.parse(this.webService.getLocalStorageItem('userData'));
      if(!this.loginDetails){
        this.goToPage('purchaseHome','');
      }
    }

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

    getOrderDetail(){
      if(this.ref_id <= 0){
        this.goToPage('purchaseHome','');
      }
      this.loader = true;
      this.webService.post_data('getOrderDetail',{'ref_id':this.ref_id}).subscribe(response => {
        if(response.status == 'success'){
          let image: string = '';
          let imageArr: any[] = new Array();
          const thisObj = this;
          this.orderDetails = response.data;
          if(this.orderDetails.images.length > 0){
            thisObj.orderDetails.images.forEach(function (data) {
              image = thisObj.imageServer + data.image;
              imageArr.push({small: image,medium: image,big: image});
            });
          }else{
            image = thisObj.imageServer +'assets/images/no_image_text.png';
            imageArr.push({small: image,medium: image,big: image});
          }
          this.galleryImages = imageArr;
        }else{
          this.orderDetails = false;
          this.goToPage('purchaseHome','');
        }
        this.loader = false;
      });
    }

    reviewBtn(){
      if(this.orderDetails.product_id <= 0){
        this.goToPage('purchaseHome','');
      }
      this.goToPage('rating',{"pId":this.orderDetails.product_id});
    }
  
    goToPage(path,data=null){
      this.router.navigate([path],{queryParams:  data});
      document.body.scrollTop  =  document.documentElement.scrollTop  =  0;
    }

    carouselTileLoad(){ return ''; }
    add(){this.count = this.count + 1;}
    minus(){ this.count = this.count - 1; if(this.count < 0){ this.count = 0; }}
    verticalSlider2: RangeSliderModel = { minValue: 50, maxValue: 100, options: { floor: 0, ceil: 100, vertical: true } };

    designModule(){
      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'}
      this.galleryOptions = [
        { width: '100%', height: '570px', thumbnailsColumns: 4, imageAnimation: NgxGalleryAnimation.Slide },
        { breakpoint: 1440, width: '100%', height: '400px', imagePercent: 80, thumbnailsPercent: 20, thumbnailsMargin: 20, thumbnailMargin: 20 },
        { breakpoint: 400, preview: false }
      ];
    }
  }
  