(function ($) {
  Drupal.behaviors.advancedpack_swiperjs = {
    attach: function (context, settings) {
      $(once('castorcito-advancedpack-swiperjs', '.advancedpack-swiper-js-wrapper', context)).each(function (index) {
        const wrapper = this;
        const swiperEl = wrapper.querySelector('.advancedpack-swiper-js');
        const swiperContainer = wrapper.querySelector('.castorcito-basepack--inner');

        const direction = swiperEl.getAttribute('data-direction') || 'horizontal';
        let pagination = swiperEl.getAttribute('data-pagination') == 1 ? true : false;
        let loop = swiperEl.getAttribute('data-loop') == 1 ? true : false;
        let slide_per_view = swiperEl.getAttribute('data-slide-per-view') != '' ? parseFloat(swiperEl.getAttribute('data-slide-per-view')) : 1;
        let slide_between = swiperEl.getAttribute('data-space-between') != '' ? parseFloat(swiperEl.getAttribute('data-space-between')) : 0;
        let centered_slides = swiperEl.getAttribute('data-centered-slides') == 1 ? true : false;
        let navigation = swiperEl.getAttribute('data-navigation') == 1 ? true : false;
        let keyboard = swiperEl.getAttribute('data-keyboard') == 1 ? true : false;
        let effect = swiperEl.getAttribute('data-effect') || 'none';
        let creative_style = swiperEl.getAttribute('data-creative-style') || 'none';
        let scrollbar = swiperEl.getAttribute('data-scrollbar') == 1 ? true : false;
        let scrollbar_hide = swiperEl.getAttribute('data-scrollbar-hide') == 1 ? true : false;
        let free_mode = swiperEl.getAttribute('data-free-mode') == 1 ? true : false;
        let zoom = swiperEl.getAttribute('data-zoom') == 1 ? true : false;
        let autoplay = swiperEl.getAttribute('data-autoplay') == 1 ? true : false;
        let delay_autoplay = parseInt(swiperEl.getAttribute('data-delay-autoplay')) || 500;
        let disable_on_interaction = swiperEl.getAttribute('data-disable-on-interaction') == 1 ? true : false;
        let autoplay_progress = swiperEl.getAttribute('data-autoplay-progress') == 1 ? true : false;
        let pagination_type = swiperEl.getAttribute('data-pagination-type') || 'none';
        let mousewheel = swiperEl.getAttribute('data-mousewheel') == 1 ? true : false;

        let navigationValue = false;
        if (navigation) {
          navigationValue = {
            nextEl: swiperContainer.querySelector('.swiper-button-next'),
            prevEl: swiperContainer.querySelector('.swiper-button-prev'),
          };
        }

        let scrollbarValue = false;
        if (scrollbar) {
          scrollbarValue = {
            el: swiperContainer.querySelector('.swiper-scrollbar'),
            hide: scrollbar_hide,
          };
        }

        let autoplayValue = false;
        let autoplayProgressValue = false;
        if (autoplay) {
          autoplayValue = {
            delay: delay_autoplay,
            disableOnInteraction: disable_on_interaction,
          };

          if (autoplay_progress) {
            const progressCircle = swiperContainer.querySelector('.swiper-autoplay-progress svg');
            const progressContent = swiperContainer.querySelector('.swiper-autoplay-progress span');
            autoplayProgressValue = {
              autoplayTimeLeft(s, time, progress) {
                if (progressCircle) {
                  progressCircle.style.setProperty("--progress", 1 - progress);
                }
                if (progressContent) {
                  progressContent.textContent = `${Math.ceil(time / 1000)}s`;
                }
              }
            };
          }
        }

        let effectValue = false;
        let effectOptions = {};
        if (effect != 'none') {
          effectValue = effect;
          if (effect == 'cube') {
            effectOptions = {
              grabCursor: true,
              cubeEffect: {
                shadow: true,
                slideShadows: true,
                shadowOffset: 20,
                shadowScale: 0.94,
              },
            };
          } else if (effect == 'coverflow') {
            effectOptions = {
              coverflowEffect: {
                rotate: 50,
                stretch: 0,
                depth: 100,
                modifier: 1,
                slideShadows: true,
              },
            };
          } else if (effect == 'flip') {
            effectOptions = {
              flipEffect: {
                slideShadows: true,
              },
            };
          } else if (effect == 'cards') {
            effectOptions = {
              grabCursor: true,
            };
          } else if (effect == 'creative') {
            if (creative_style == 'creative_1') {
              effectOptions = {
                grabCursor: true,
                creativeEffect: {
                  prev: {
                    shadow: true,
                    translate: [0, 0, -400],
                  },
                  next: {
                    translate: ["100%", 0, 0],
                  },
                },
              };
            } else if (creative_style == 'creative_2') {
              effectOptions = {
                grabCursor: true,
                creativeEffect: {
                  prev: {
                    shadow: true,
                    translate: ["-120%", 0, -500],
                  },
                  next: {
                    shadow: true,
                    translate: ["120%", 0, -500],
                  },
                },
              };
            } else if (creative_style == 'creative_3') {
              effectOptions = {
                grabCursor: true,
                creativeEffect: {
                  prev: {
                    shadow: true,
                    translate: ["-20%", 0, -1],
                  },
                  next: {
                    translate: ["100%", 0, 0],
                  },
                },
              };
            } else if (creative_style == 'creative_4') {
              effectOptions = {
                grabCursor: true,
                creativeEffect: {
                  prev: {
                    shadow: true,
                    translate: [0, 0, -800],
                    rotate: [180, 0, 0],
                  },
                  next: {
                    shadow: true,
                    translate: [0, 0, -800],
                    rotate: [-180, 0, 0],
                  },
                },
              };
            } else if (creative_style == 'creative_5') {
              effectOptions = {
                grabCursor: true,
                creativeEffect: {
                  prev: {
                    shadow: true,
                    translate: ["-125%", 0, -800],
                    rotate: [0, 0, -90],
                  },
                  next: {
                    shadow: true,
                    translate: ["125%", 0, -800],
                    rotate: [0, 0, 90],
                  },
                },
              };
            } else if (creative_style == 'creative_6') {
              effectOptions = {
                grabCursor: true,
                creativeEffect: {
                  prev: {
                    shadow: true,
                    origin: "left center",
                    translate: ["-5%", 0, -200],
                    rotate: [0, 100, 0],
                  },
                  next: {
                    origin: "right center",
                    translate: ["5%", 0, -200],
                    rotate: [0, -100, 0],
                  },
                },
              };
            }


          }
        }

        let paginationValue = false;
        if (pagination) {
          if (pagination_type == 'none') {
            // Pagination enabled but no visual type — leave paginationValue false.
          } else if (pagination_type == 'dynamic') {
            paginationValue = {
              el: swiperContainer.querySelector('.swiper-pagination'),
              dynamicBullets: true,
              clickable: true,
            };
          } else if (pagination_type == 'progress') {
            paginationValue = {
              el: swiperContainer.querySelector('.swiper-pagination'),
              type: 'progressbar',
              clickable: true,
            };
          } else if (pagination_type == 'fraction') {
            paginationValue = {
              el: swiperContainer.querySelector('.swiper-pagination'),
              type: 'fraction',
              clickable: true,
            };
          } else if (pagination_type == 'custom') {
            paginationValue = {
              el: swiperContainer.querySelector('.swiper-pagination'),
              clickable: true,
              renderBullet: function (index, className) {
                return '<span class="' + className + '">' + (index + 1) + '</span>';
              },
            };
          } else {
            // Default: standard bullets.
            paginationValue = {
              el: swiperContainer.querySelector('.swiper-pagination'),
              clickable: true,
            };
          }
        }

        const swiper = new Swiper(swiperContainer, {
          direction: direction,
          loop: loop,
          slidesPerView: slide_per_view,
          spaceBetween: slide_between,
          centeredSlides: centered_slides,
          navigation: navigationValue,
          keyboard: keyboard,
          effect: effectValue,
          ...effectOptions,
          scrollbar: scrollbarValue,
          scrollbarHide: scrollbar_hide,
          freeMode: free_mode,
          zoom: zoom,
          autoplay: autoplayValue,
          mousewheel: mousewheel,
          pagination: paginationValue,
          on: autoplayProgressValue,
        });
      });
    }
  };

})(jQuery);
