import { Component, OnInit } from '@angular/core';
import { Router,ActivatedRoute } from '@angular/router';
import { NgxGalleryOptions, NgxGalleryImage, NgxGalleryAnimation } from 'ngx-gallery';
import * as $ from 'jquery';
import { NgxCarousel } from 'ngx-carousel';

@Component({
  selector: 'app-productdetails',
  templateUrl: './productdetails.component.html',
  styleUrls: ['./productdetails.component.scss']
})
export class ProductdetailsComponent implements OnInit {
  count:any;
  public carouselTile: NgxCarousel;
  constructor(
    private router        : Router, 
    private route         : ActivatedRoute
  ) {
    this.count = 0;
   }



add(){
  this.count = this.count + 1;
}

minus(){
  this.count = this.count - 1;
  if(this.count < 0){
    this.count = 0;
  }
}


 galleryOptions: NgxGalleryOptions[];
    galleryImages: NgxGalleryImage[];

    ngOnInit(): void {
      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
            },
            // max-width 800
            {
                breakpoint: 1440,
                width: '100%',
                height: '400px',
                imagePercent: 80,
                thumbnailsPercent: 20,
                thumbnailsMargin: 20,
                thumbnailMargin: 20
            },
            // max-width 400
            {
                breakpoint: 400,
                preview: false
            }
        ];

        this.galleryImages = [
            {
                small: 'assets/images/tyre_shot1.png',
                medium: 'assets/images/tyre_shot1.png',
                big: 'assets/images/tyre_shot1.png'
            },
            {
              small: 'assets/images/tyre_shot2.png',
              medium: 'assets/images/tyre_shot2.png',
              big: 'assets/images/tyre_shot2.png'
          },
          {
            small: 'assets/images/tyre_shot3.png',
            medium: 'assets/images/tyre_shot3.png',
            big: 'assets/images/tyre_shot3.png'
        },
        {
          small: 'assets/images/tyre_shot4.png',
          medium: 'assets/images/tyre_shot4.png',
          big: 'assets/images/tyre_shot4.png'
      }
            
        ];
    }
  goToPage(path,data=null){
    this.router.navigateByUrl(path,{queryParams:data});
    document.body.scrollTop = document.documentElement.scrollTop = 0;
  }
  carouselTileLoad(){ return ''; }

}
