import Swiper, { Pagination, Autoplay, EffectFade, Parallax } from 'swiper';
import 'swiper/css/autoplay';
const breakpoint = window.matchMedia('(min-width: 1200px)');

export const swiperResponsibility = new Swiper('.slider-responsibility__swiper', {
  modules: [Pagination, Autoplay, EffectFade, Parallax],
  effect: 'fade',
  parallax: true,
  init: false,
  fadeEffect: {
    crossFade: true
  },
  speed: 800,
  slidesPerView: 1,
  autoplay: {
    delay: 7000,
    pauseOnMouseEnter: false,
    disableOnInteraction: true,
  },
  loop: true,
  pagination: {
    el: '.pagination',
    type: 'bullets',
    bulletClass: 'pagination__item',
    bulletActiveClass: 'pagination__item_active',
    renderBullet: () => {
      return `
            <div class="pagination__item">
                <div class="pagination__progress">
                    <span class="pagination__progress-span"></span>
                </div>
                <div class="pagination__text defaultSmall"></div>
            </div>`;
    },
  },
  allowTouchMove: !breakpoint.matches
});

swiperResponsibility.on('init', () => {
  const video = document.querySelector('.slider-responsibility__video--sustainability');

  if (!video) return false;

  video.currentTime = 0;

  swiperResponsibility.on('slideChange', () => {
    const pagination = document.querySelector('.pagination');

    if (!pagination) return

    const itemPagination = pagination.querySelectorAll('.pagination__item');
    removeActive(itemPagination);

    for (let i = 0; i <= itemPagination.length; i++) {
      if (swiperResponsibility.realIndex === i) {
        if (!itemPagination[i]) return;
        itemPagination[i].classList.add('pagination__item_active');
      }
    }

    video.play()
    switch(swiperResponsibility.activeIndex) {
      case 2:
        setTimeout(() => {
          video.currentTime = .65;
          video.pause();
        }, 600)
        break;
      case 3:
        setTimeout(() => {
          video.currentTime = 1.33;
          video.pause();
        }, 680)
        break;
      case 4:
        setTimeout(() => {
          video.currentTime = 2;
          video.pause();
        }, 600)
        break;
      case 5:
        setTimeout(() => {
          video.currentTime = 0;
          video.pause();
        }, 650)
        break;
    }
  });

  const removeActive = (items) => {
    items.forEach(item => {
      if (!item) return;

      item.classList.remove('pagination__item_active');
    })
  }
});