import Swiper from 'swiper';
import SwiperCore, { Navigation, Pagination, Autoplay } from 'swiper/core';
SwiperCore.use([Navigation, Pagination, Autoplay]);

export default () => {
  const carousel = document.querySelector('.muy-carousel .swiper');
  const userOptions = JSON.parse(carousel.dataset.swiper);
  const slidesToShow = userOptions.slidesToShow;
  const dots = userOptions.dots;
  const arrows = userOptions.arrows;
  const autoplay = userOptions.autoplay;
  const autoplaySpeed = userOptions.autoplaySpeed;
  const pauseOnHover = userOptions.pauseOnHover;
  const spaceBetween = parseInt(userOptions.spaceBetween, 10) || 0;
  const infinite = userOptions.infinite;
  const slidesToShowScreenLg = userOptions.responsive.slidesToShowLg;
  const slidesToShowScreenMd = userOptions.responsive.slidesToShowMd;
  const slidesToShowScreenSm = userOptions.responsive.slidesToShowSm;
  
  console.log('userOptions', userOptions);


  const swiper = new Swiper(carousel, {
    modules: [Navigation, Pagination, Autoplay],
    slidesPerView: slidesToShow,
    autoplay: autoplay,
    autoplaySpeed: autoplaySpeed,
    pauseOnHover: pauseOnHover,
    spaceBetween: spaceBetween,
    loop: infinite,
    draggable: true,
    allowTouchMove: true,
    
    navigation: {
      nextEl: carousel.querySelector('.swiper-button-next'),
      prevEl: carousel.querySelector('.swiper-button-prev'),
    },
    pagination: {
      el: carousel.querySelector('.swiper-pagination'),
      clickable: true,
    },
    breakpoints: {
      870: {
        slidesPerView: slidesToShow,
      },
      640: {
        slidesPerView: slidesToShowScreenMd,
      },
      320: {
        slidesPerView: slidesToShowScreenSm,
      },
    },
  });
}