import Swiper, { Pagination, Autoplay, Parallax, EffectFade } from 'swiper';
import 'swiper/css/autoplay';
import 'swiper/css';
import 'swiper/css/pagination';

const breakpoint = window.matchMedia('(min-width: 1200px)');

export const swiperHistory = new Swiper('.slider-history__swiper', {
  modules: [Pagination, Autoplay, Parallax, EffectFade],
  effect: 'fade',
  fadeEffect: {
    crossFade: true
  },
  speed: 600,
  parallax: true,
  pagination: {
    el: ".pagination-line",
    type: "progressbar",
  },
  autoplay: {
    delay: 7000,
    disableOnInteraction: false,
  },
  loop: true,
  allowTouchMove: !breakpoint.matches
});
window.addEventListener('load', () => {
  const year = document.querySelector('.slider-history__year');
  const yearItem = document.querySelectorAll('.slider-history__year-item');
  yearItem.forEach(el => el.addEventListener('click', () => {
    swiperHistory.slideTo(Number(el.dataset.slide)) ;
  }));
  const activeYear = (index) => {
    yearItem.forEach(item => {
      item.classList.remove('active');
    })
    let slide;
    if (Number(index) === 11) {
      slide = document.querySelector(`[data-slide="1"]`);
    } else if (Number(index) === 0) {
      slide = document.querySelector(`[data-slide="10"]`);
    } else {
      slide = document.querySelector(`[data-slide="${index}"]`);
    }

    if (!slide) return false;

    slide.classList.add('active');
    setTimeout(() => {
      slide.classList.remove('active');
    }, 6300);
    return index === 11 ? 0 : slide.offsetLeft;
  }
  swiperHistory.init();
  activeYear(swiperHistory.activeIndex);
  swiperHistory.on('slideChange', () => {
    switch (swiperHistory.activeIndex) {
      case 0:
        year.style.left = `-${activeYear(swiperHistory.activeIndex)}px`;
        break;
      case 1:
        year.style.left = `-${activeYear(swiperHistory.activeIndex)}px`;
        break;
      case 2:
        year.style.left = `-${activeYear(swiperHistory.activeIndex)}px`;
        break;
      case 3:
        year.style.left = `-${activeYear(swiperHistory.activeIndex)}px`;
        break;
      case 4:
        year.style.left = `-${activeYear(swiperHistory.activeIndex)}px`;
        break;
      case 5:
        year.style.left = `-${activeYear(swiperHistory.activeIndex)}px`;
        break;
      case 6:
        year.style.left = `-${activeYear(swiperHistory.activeIndex)}px`;
        break;
      case 7:
        year.style.left = `-${activeYear(swiperHistory.activeIndex)}px`;
        break;
      case 8:
        year.style.left = `-${activeYear(swiperHistory.activeIndex)}px`;
        break;
      case 9:
        year.style.left = `-${activeYear(swiperHistory.activeIndex)}px`;
        break;
      case 10:
        year.style.left = `-${activeYear(swiperHistory.activeIndex)}px`;
        break;
      case 11:
        year.style.left = `-${activeYear(swiperHistory.activeIndex)}px`;
        break;
    }
  });
});