import Swiper from 'swiper';
import 'swiper/bundle';

window.Webflow ||= [];
window.Webflow.push(() => {
  //
  /* ****************************************************************************** */
  /* ************************************ SWIPER ********************************** */
  /* ****************************************************************************** */
  //

  const in_person_swiper = new Swiper('.swiper', {
    loop: true,
    loopedSlides: 4,
    slidesPerView: 1,
    roundLengths: true,
    longSwipesMs: 5000,
    speed: 700,
    grabCursor: true,
    keyboard: true,
    navigation: {
      nextEl: '#swiper-button-next',
      prevEl: '#swiper-button-prev',
    },
    effect: 'cards',
    cardsEffect: {
      perSlideOffset: 9,
      rotate: false,
    },
    breakpoints: {
      992: {
        autoHeight: true,
      },
    },
  });

  //
  /* ****************************************************************************** */
  /* ************************************* MENU *********************************** */
  /* ****************************************************************************** */
  //

  const menu_lottie = document.querySelector('.nav-bar_menu-lottie') as HTMLElement;
  const nav_bar = document.querySelector('.nav-bar') as HTMLDivElement;
  const nav_bar_menu = document.querySelector('.nav-bar_menu') as HTMLDivElement;
  const nav_bar_cta = document.querySelector('.nav-bar_cta-buttons') as HTMLDivElement;
  const cart_link = document.querySelector('.cart_button') as HTMLAnchorElement;
  const cart_exit = document.querySelector('.cart_exit-icon') as HTMLDivElement;
  const nav_links: HTMLElement[] = Array.from(
    document.querySelectorAll('.nav-bar a:not(.cart_button):not(.heading-style-h4)')
  );

  menu_lottie.onclick = () => {
    nav_bar.classList.toggle('is-menu-open');
    nav_bar_menu.classList.toggle('hide-tablet');
    nav_bar_cta.classList.toggle('hide-tablet');
  };

  cart_link.onclick = () => {
    if (window.matchMedia('(max-width: 991px)').matches) {
      nav_bar.classList.toggle('is-menu-open');
      nav_bar_menu.classList.toggle('hide-tablet');
      document.body.style.overflow = 'hidden';
    }
  };

  cart_exit.onclick = () => {
    document.body.style.overflow = 'hidden';
    if (window.matchMedia('(max-width: 991px)').matches) {
      menu_lottie.click();
    }
  };

  nav_links.forEach(link => {
    link.onclick = () => {
      if (
        window.matchMedia('(max-width: 991px)').matches &&
        nav_bar.classList.contains('is-menu-open')
      ) {
        menu_lottie.click();
      }
    };
  });

  //
  /* **************************************************************************** */
  /* ************************************ MODALS ******************************** */
  /* **************************************************************************** */
  //

  const modals_buttons: HTMLAnchorElement[] = Array.from(
    document.querySelectorAll('.button.is-workshop')
  );

  const modals_backdrop: HTMLElement[] = Array.from(
    document.querySelectorAll('.home-workshops_modal-wrapper')
  );

  const modals: HTMLElement[] = Array.from(document.querySelectorAll('.home-workshops_modal'));

  modals_buttons.forEach(button => {
    button.addEventListener('click', () => {
      const parent = button.parentElement;
      const modal_wrapper = parent?.querySelector(
        '.home-workshops_modal-wrapper'
      ) as HTMLDivElement;
      const modal = parent?.querySelector('.home-workshops_modal') as HTMLDivElement;

      modal_wrapper.style.display = 'flex';
      modal_wrapper.style.opacity = '1';
      modal.style.opacity = '1';
      document.body.style.overflow = 'hidden';
    });
  });

  modals_backdrop.forEach(backdrop => {
    backdrop.addEventListener('click', () => {
      const modal = backdrop.querySelector('.home-workshops_modal') as HTMLDivElement;

      backdrop.style.opacity = '0';
      modal.style.opacity = '1';
      document.body.style.overflow = 'auto';
      setTimeout(() => {
        backdrop.style.display = 'none';
      }, 300);
    });
    backdrop.addEventListener('mouseover', () => {
      backdrop.style.cursor = 'pointer';
    });
    backdrop.addEventListener('mouseout', () => {
      backdrop.style.cursor = 'auto';
    });
  });

  modals.forEach(modal => {
    modal.addEventListener('click', e => {
      e.stopPropagation();
    });
    modal.addEventListener('mouseover', e => {
      e.stopPropagation();
    });
  });

  //
  /* **************************************************************************** */
  /* *********************************** WORKSHOP ******************************* */
  /* **************************************************************************** */
  //

  const image_wrappers = Array.from(document.querySelectorAll('.home-workshop_card-image-wrapper'));

  image_wrappers.forEach(image => {
    image.addEventListener('click', () => {
      if (image.classList.contains('is-active')) {
        image.classList.remove('is-active');
        return;
      }

      const active_workshop = document.querySelector(
        '.home-workshop_card-image-wrapper.is-active'
      ) as HTMLDivElement;

      if (active_workshop) {
        active_workshop.click();
        active_workshop.classList.remove('is-active');
      }

      image.classList.add('is-active');
    });
  });

  //
  /* *************************************************************************** */
  /* ************************************* FAQ ********************************* */
  /* *************************************************************************** */
  //

  const faq_wrappers = Array.from(document.querySelectorAll('.faq_question-wrapper'));

  faq_wrappers.forEach(faq => {
    faq.addEventListener('click', () => {
      if (faq.classList.contains('is-active')) {
        faq.classList.remove('is-active');
        return;
      }

      const active_faq = document.querySelector(
        '.faq_question-wrapper.is-active'
      ) as HTMLDivElement;

      if (active_faq) {
        active_faq.click();
        active_faq.classList.remove('is-active');
      }

      faq.classList.add('is-active');
    });
  });
});