/* -- The root styles must go in the element of the structure with the name "Slider 2". --*/

.jo-product__slider-2 {
  /* Styles slide */
  .splide__track--nav>.splide__list>.splide__slide{
    opacity: 0.3;
    border: 1px solid transparent;
    
		/* Styles slide active */
    &.is-active{
      border: 1px solid var(--dark);
      opacity: 1;
    }
  }  
}

/* Styles for category or tag items to add a comma when there is more than one element */
.jo-product__taxonomy-item:not(:last-of-type)::after {
  content: ",";
  font-weight: 700;
}

let mySlider1, mySlider2;
let initTimeout, resizeTimeout;

function initializeSliders() {
  // Check if bricksData and bricksData.splideInstances are available
  if (typeof bricksData === "undefined" || !bricksData.splideInstances) {
    initTimeout = setTimeout(initializeSliders, 100);
    return;
  }
  // Once ready, synchronize sliders
  synchronizeSliders();
}

function synchronizeSlidersOnResize() {
  resizeTimeout = setTimeout(synchronizeSliders, 260);
}

function synchronizeSliders() {
  if (!mySlider1 || !mySlider2) {
    // Get slider DOM elements
    const idComplete1 = document.querySelector(".jo-product__slider-1");
    const idComplete2 = document.querySelector(".jo-product__slider-2");

    if (idComplete1 && idComplete2) {
      // Retrieve the required IDs to access sliders
      const idSlider1 = idComplete1.getAttribute('data-script-id');
      const idSlider2 = idComplete2.getAttribute('data-script-id');

      // Assign sliders from bricksData.splideInstances
      mySlider1 = bricksData.splideInstances[idSlider1];
      mySlider2 = bricksData.splideInstances[idSlider2];
    }

    // Configure custom buttons
    const btnPrevious = document.querySelector(".jo-product__arrow-prev");
    const btnNext = document.querySelector(".jo-product__arrow-next");
    if (btnPrevious && btnNext && mySlider1) {
      btnPrevious.addEventListener("click", function () {
        mySlider1.go("-");
      });
      btnNext.addEventListener("click", function () {
        mySlider1.go("+");
      });
    }
  }

  // If both sliders are defined, synchronize them
  if (mySlider1 && mySlider2) {
    mySlider1.sync(mySlider2);
  }

  clearTimeout(initTimeout);
}

// Use the 'load' event to ensure all resources are loaded
window.addEventListener("load", initializeSliders);
// Synchronize sliders on window resize
window.addEventListener("resize", synchronizeSlidersOnResize);