const toggleButtons = document.querySelectorAll('.toggle');
const sliders = document.querySelectorAll('.carousel');
let slideButtons = document.querySelectorAll('.wifi-card-section__card-container__card__content__button');
let carouselSalesButtons = document.querySelectorAll('.sales .wifi-carousel-section__carousel__card__content__link');
let carouselServiceButtons = document.querySelectorAll('.service .wifi-carousel-section__carousel__card__content__link');

for(let i = 0; i < slideButtons.length; i++) {
  slideButtons[i].addEventListener('click', function() {
    let eventLabel = slideButtons[i].innerHTML.trim().split(' ').join('_').toLowerCase();
    tealiumCardClickEvent(eventLabel, i);
  });
}

for(let i = 0; i < carouselSalesButtons.length; i++) {
  carouselSalesButtons[i].addEventListener('click', function() {
    let eventLabel = carouselSalesButtons[i].innerHTML.trim().split(' ').join('_').toLowerCase();
    let eventText = carouselSalesButtons[i].previousElementSibling.querySelector('.wifi-carousel-section__carousel__card__content__title').innerText;
    let formattedText = eventText.trim().split(' ').join('_').toLowerCase();

    tealiumClickEvent(formattedText, eventLabel);
  });
}

for(let i = 0; i < carouselServiceButtons.length; i++) {
  carouselServiceButtons[i].addEventListener('click', function() {
    let eventLabel = carouselServiceButtons[i].innerHTML.trim().split(' ').join('_').toLowerCase();
    let eventText = carouselServiceButtons[i].previousElementSibling.querySelector('.wifi-carousel-section__carousel__card__content__title').innerText;
    let formattedText = eventText.trim().split(' ').join('_').toLowerCase();

    tealiumClickEvent(formattedText, eventLabel);
  });
}

for (let i = 0; i < toggleButtons.length; i++) {
    toggleButtons[i].addEventListener('click', function(e) {
        toggleActive(toggleButtons, e);     
        toggleSlider(sliders, e);                
    })
}

function tealiumCardClickEvent(eventLabel, number) {
  let event = '';

  switch(number) {
    case 0: 
      event = 'srp_click'
      break;
    case 1: 
      event = 'pre_qualified_click'
      break;
    case 2: 
      event = 'wbyc_page_click'
      break;
    case 3: 
      event = 'why_service_with_us_lp_click'
      break;
    case 4: 
      event = 'service_finance_lp_click'
      break;
  }

  let clickdata = {
      "category_l1":"MLP",
      "category_l2":"Guest Wifi",
      "category_l3":"(not set)",
      "category_l4":"(not set)",
      "event":"" + event,
      "event_category":"EngagementType",
      "event_action":"EngagementType_MLP|||Click",
      "event_label":"" + eventLabel,
      "event_value":"1",
      "pagegroup":"mlp"            
  };

  window.utag_data = clickdata;
  window.utag.link(window.utag_data);  
}

function tealiumClickEvent(event, eventLabel) {
  let clickdata = {
      "category_l1":"MLP",
      "category_l2":"Guest Wifi",
      "category_l3":"(not set)",
      "category_l4":"(not set)",
      "event":event + "_click" ,
      "event_category":"EngagementType",
      "event_action":"EngagementType_MLP|||Click",
      "event_label":"" + eventLabel,
      "event_value":"1",
      "pagegroup":"mlp"            
  };

  window.utag_data = clickdata;
  window.utag.link(window.utag_data);
}

const bodySwiper = new Swiper('.wifi-carousel-section__carousel', {
    // Optional parameters
    direction: 'horizontal',
    slidesPerView: 3,
    slidesPerGroup: 3,
    spaceBetween: 30,
    loop: false,
    preloadImages: false,
    watchOverflow: false,
    lazy: true,
    noSwipingClass: 'swiper-no-swiping',
    observer: true,
    centeredSlides: false,
    breakpoints: {
      321: {
        slidesPerView: 1.15,
        slidesPerGroup: 1,
        watchOverflow: true,
        spaceBetween: 10,            
      },
      390: {
        slidesPerView: 1.3,
        slidesPerGroup: 1,
        centeredSlides: false
      },
      652: {
        slidesPerView: 2,
        slidesPerGroup: 2,
        centeredSlides: false        
      },
      1301: {
        slidesPerView: 3,
        slidesPerGroup: 3,
        centeredSlides: false
      }
    },
    // If we need pagination
    pagination: {
        el: '.swiper-pagination',
        clickable: true
    },

    // Navigation arrows
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    }
});  

const bodyServiceSwiper = new Swiper('.wifi-carousel-section__carousel-service', {
    // Optional parameters
    direction: 'horizontal',
    slidesPerView: 3,
    slidesPerGroup: 3,
    spaceBetween: 30,
    loop: false,
    preloadImages: false,
    watchOverflow: false,
    lazy: true,
    noSwipingClass: 'swiper-no-swiping',
    observer: true,
    centeredSlides: false,
    breakpoints: {
      321: {
        slidesPerView: 1.15,
        slidesPerGroup: 1,
        watchOverflow: true,
        spaceBetween: 10,
        centeredSlides: true
      },
      390: {
        slidesPerView: 1.3,
        slidesPerGroup: 1,
        centeredSlides: false
      },
      652: {
        slidesPerView: 2,
        slidesPerGroup: 2            
      },
      1201: {
        slidesPerView: 3,
        slidesPerGroup: 3
      }
    },
    // If we need pagination
    pagination: {
        el: '.swiper-pagination-service',
        clickable: true
    },

    // Navigation arrows
    navigation: {
        nextEl: '.swiper-button-next-service',
        prevEl: '.swiper-button-prev-service',
    }
});  


function toggleActive(buttons, e) {
    for (let i = 0; i < buttons.length; i++) {
        if (e.target === buttons[i]) {
            buttons[i].classList.add('active');
        } else {
            buttons[i].classList.remove('active');
        }
    }
}

function toggleSlider(slider, e) {
  const buttonText = e.target.innerText.toLowerCase();

  for (let i = 0; i < slider.length; i++) {
    if (slider[i].classList.contains(buttonText)) {
      slider[i].style.display = 'block';
    } else {
      slider[i].style.display = 'none';
    }
  }

  bodySwiper.update();
  bodyServiceSwiper.update();
}