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

@Component({
  selector: 'app-productdetails',
  templateUrl: './productdetails.component.html',
  styleUrls: ['./productdetails.component.scss']
})
export class ProductdetailsComponent implements OnInit {
  
  loader: boolean;
  count:any;
  product_id: number;
  imageServer: string;
  productDetails:any;
  product_data:any = new Array();
  galleryImages: NgxGalleryImage[];
  galleryOptions: NgxGalleryOptions[];
  loginDetails:any;

  @ViewChild("indexLoginModal") loginModalRef: ElementRef;

  public carouselTile: NgxCarousel;
  constructor(private router: Router, 
              private route: ActivatedRoute,
              public webService: WebService,
              public subjectService : SubjectService) {
                
    this.loader       = true;
    this.count        = 1;
    this.product_id   = 0;
    this.imageServer  = ImageStorage; 
    this.router.routeReuseStrategy.shouldReuseRoute = function(){
      return false;
    }

    route.params.subscribe(val => {
      this.route.queryParams.subscribe(params => {
        this.product_id = params['product_id'];
      });
      this.getProductDetails();
    });

    if(!this.product_id){
      this.goToPage('purchaseHome','');
    }
  }

  add(){this.count = this.count + 1;}
  minus(){this.count = this.count - 1;
    if(this.count < 1){this.count = 1;}
  }
  
  ngOnInit(): void {
    
    this.designModules();
    this.checkUserLogin();
  }

  checkUserLogin(){
    this.loginDetails = JSON.parse(this.webService.getLocalStorageItem('userData'));
    this.subjectService.getLoginData().subscribe(loginData => {
      this.loginDetails = JSON.parse(this.webService.getLocalStorageItem('userData'));
    });
  }

  getProductDetails(){
    this.webService.post_data('SingleProductSearch',{"product_id":this.product_id}).subscribe(response => {
      if(response.status == 'success'){
        let image: string = '';
        let imageArr: any[] = new Array();
        const thisObj = this;
        this.productDetails = response.data;
        console.log(response.data)
        if(this.productDetails.images.length > 0){
          thisObj.productDetails.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.productDetails = false;
      }
      this.loader = false;
    });
  }

  buyProduct(amount){
    if(!this.loginDetails){
      this.loginModalRef.nativeElement.click();
      return false;
    }
    this.product_data = {amount:amount,product_id:this.product_id,quantity:this.count,total_amount:this.count*amount};
    this.webService.setLocalStorageItem('productDetails', JSON.stringify(this.product_data));
    this.goToPage('address','');
  }
  
  goToPage(path,data=null){
    this.router.navigate([path],{queryParams:  data});
    document.body.scrollTop  =  document.documentElement.scrollTop  =  0;
  }
  
  designModules(){
    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
      }
    ];
  }
  carouselTileLoad(){ return ''; }
}
  