var Wick = Wick || {};
Wick.ModalSlider = (function () {
  var $modalSliders = $('.modal-slider');

  var getParameters = function (element) {
    var elemParent = $(element).parent(),
        width = breakpoint === 'up-lg' ? 540 : 570,
        slidesPerView = breakpoint === 'up-lg' ? element.dataset.slides : breakpoint === 'only-md' ? element.dataset.slidesMd : 1;

    return {
      roundLengths: true,
      navigation: {
        nextEl: elemParent.find('.modal-slider__btn-next')[0],
        prevEl: elemParent.find('.modal-slider__btn-prev')[0]
      },
      slidesPerView: slidesPerView,
      spaceBetween: 30,
      watchOverflow: true,
      loop: true,
      width: width
    }
  };

  var destroySliders = function () {
    $modalSliders.each(function(index, element){
      var slider = element.swiper;
      if (slider){
        slider.destroy();
      }
    });
  };

  var createSliders = function () {
    $modalSliders.each(function(index, element){
      var slider = element.swiper;
      if (slider){
        slider.destroy();
      }
      slider = new Swiper(element, getParameters(element));
    });
  };

  var init = function () {
    Wick.Responsive.onBreakpoint(function () {
      destroySliders();
    }, 'down-sm');
    Wick.Responsive.onBreakpoint(function () {
      createSliders();
    }, 'only-md');
    Wick.Responsive.onBreakpoint(function () {
      createSliders();
    }, 'up-lg');

    if (Wick.Responsive.getCurrentBreakpoint() !== 'down-sm'){
      createSliders();
    }
  };

  $(document).ready(function () {
    $modalSliders.length && init();
  });
})();
