class OrokuBlocks_WoocommerceProduct_Elementor_Handler extends elementorModules.frontend.handlers.Base {
  getDefaultElements() {
    const container = this.$element[0].querySelector('.orokublocks-woocommerceproduct');

    if (container) {
      // Carousel
      const carouselContainer = container.querySelector('.orokublocks-glide-carousel');

      if (carouselContainer) {
        const carouselOptions = {
          gap: 0
        };

        const carousel = new Glide(carouselContainer, carouselOptions).mount();
      }

      // Carousel fixed
      const fixedCarouselContainer = container.querySelector('.orokublocks-glide-carousel-fixed');

      if (fixedCarouselContainer) {
        const fixedCarouselOptions = {
          gap: 0,
          rewind: false,
          swipeThreshold: false,
          dragThreshold: false
        };

        const carouselFixed = new Glide(fixedCarouselContainer, fixedCarouselOptions).mount();

        if (carouselFixed) {
          // Line Carousel
          const lineCarouselContainer = container.querySelector('.orokublocks-glide-carousel-line');

          if (lineCarouselContainer) {
            const lineCarouselOptions = {
              gap: 10,
              perView: 4,
              rewind: false,
              swipeThreshold: false,
              dragThreshold: false,
              animationDuration: 200
            };

            const lineCarousel = new Glide(lineCarouselContainer, lineCarouselOptions).mount();

            lineCarousel.on('run', (e) => {
              carouselFixed.go(e.direction);
            });
          }

          // Carousel bullets
          const carouselBullets = container.querySelectorAll('.orokublocks-thumbnail-bullet');

          for (let i = 0; i < carouselBullets.length; i++) {
            const bullet = carouselBullets[i];

            if (i === carouselFixed.index) {
              bullet.classList.add('orokublocks-thumbnail-bullet--active');
            }
          }

          if (carouselBullets.length > 0) {
            for (let i = 0; i < carouselBullets.length; i++) {
              const bullet = carouselBullets[i];

              bullet.addEventListener('click', () => {
                for (const bullet of carouselBullets) {
                  bullet.classList.remove('orokublocks-thumbnail-bullet--active');
                }

                carouselFixed.go(`=${i}`);

                bullet.classList.add('orokublocks-thumbnail-bullet--active');
              });
            }
          }
        }
      }
    }

    return {
      woocommerceProductCard: container
    };
  }
}

window.addEventListener('elementor/frontend/init', () => {
  elementorFrontend.elementsHandler.attachHandler('orokublocks_woocommerceproduct_elementor_widget', OrokuBlocks_WoocommerceProduct_Elementor_Handler);
});