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 infinite = userOptions.infinite;
  const slidesToShowScreenLg = userOptions.responsive.slidesToShowLg;
  const slidesToShowScreenMd = userOptions.responsive.slidesToShowMd;
  const slidesToShowScreenSm = userOptions.responsive.slidesToShowSm;
  
  console.log('userOptions', slidesToShowScreenMd);

  // console.log('slidesToShowScreenLg', slidesToShowScreenLg);
  // console.log('slidesToShowScreenMd', slidesToShowScreenMd);
  // console.log('slidesToShowScreenSm', slidesToShowScreenSm);


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