var $ = jQuery;

$(function () {

    let productSelector = document.querySelector('[data-product-slider]');
    let productControls = document.querySelector('[data-product-controls]');
    let sliderScroll = document.querySelector('[data-scroll-handle]');
    
    let productSlider = tns({
        container: productSelector,
        items: 5,
        controls: true,
        controlsContainer: productControls,
        mouseDrag: true,
        loop: false,
        responsive: {
        720: {
            items: 5
        },
        1: {
            items: 1
        }
        }
    });

    // get slider info
    var info = productSlider.getInfo(),
    startIndex = info.displayIndex - 1,
    slideCounter = info.slideCount;
    
    const slides = slideCounter == 0 ? 0 : slideCounter;

    // If below 720, we only show 1 product at a time = Make controls for each single slide
    // If eq or above 720, we show 5 products at a time = subtract 4
    let controlCount = window.innerWidth < 720 ? slides : slides -4;
    let spacing = 100 / controlCount;

  
    if(slides > 5) {

        // Initial calculation of handle
        calculateSliderHandle(sliderScroll);
        updateHandle(startIndex);

        productSlider.events.on('indexChanged',function(event){
            updateHandle(event.displayIndex - 1);
        });
        
    }

  function calculateSliderHandle(controlElement) {
  
    // If below 720, we only show 1 product at a time = Make controls for each single slide
    // If eq or above 720, we show 5 products at a time = subtract 4
    controlCount = window.innerWidth < 720 ? slides : slides -4;
    
    spacing = 100 / controlCount;

    controlElement.style.width = spacing + '%';
  }

  function calculateSlider(productSlider) {
      productSlider.destroy();
      productSlider = productSlider.rebuild();

      // re-attach slider-handle
      productSlider.events.on('indexChanged',function(event){
          updateHandle(event.displayIndex - 1);
      });

      calculateSliderHandle(sliderScroll);

      // Set index to 0 (slider is reset on rebuild)
      updateHandle(0);

      return productSlider;

  }

  function updateHandle(index) {
    sliderScroll.style.left = `${spacing * index}%`;
  }

  let wasRebuilt = false;

  window.addEventListener('resize', function () { 

    // Below 720
    if( (this.innerWidth < 720 && wasRebuilt == false) ) {
    
        // Recalculate
        productSlider = calculateSlider(productSlider);

        // Flag to first rebuild if eq or above 720 again
        wasRebuilt = true;
    }

    // EQ or Above 720
    if(this.innerWidth >= 720 && wasRebuilt == true ) {
        
        // Recalculate
        productSlider = calculateSlider(productSlider);
      
        // Flag to first rebuild if below 720 again
        wasRebuilt = false;
    }
  });


});