import * as $ from "jquery";
import { InobyModule } from "@lib/inoby-module";
import KeenSlider from "keen-slider";
import { dots, arrows } from "@lib/keen-slider-plugins";
class CarouselBoxesComponent extends InobyModule {
  run() {
    const $elements = $("section.carousel-boxes .carousel-boxes-wrap");

    $elements.each(function () {
      var numslides = Number($(this).parent().data("numslides"));
      var per_slide_lg = Number($(this).parent().data("slides-lg"));
      var per_slide_md = Number($(this).parent().data("slides-md"));
      var per_slide_sm = Number($(this).parent().data("slides-sm"));
      var spacing = Number($(this).parent().data("spacing"));
      const plugins = [];
      if (numslides >= per_slide_lg) {
        plugins.push(dots);
        // plugins.push(arrows);
        $(this).addClass("keen-slider");
      }
      var slider = new KeenSlider(
        this,
        {
          selector: ".carousel-box",
          loop: true,
          slides: {
            perView: per_slide_lg,
            spacing: spacing,
          },
          breakpoints: {
            "(max-width: 767px)": {
              slides: {
                perView: per_slide_sm,
                spacing: spacing,
              },
            },
            "(min-width: 768px)": {
              slides: {
                perView: per_slide_md,
                spacing: spacing,
              },
            },
            "(min-width: 1200px)": {
              slides: {
                perView: per_slide_lg,
                spacing: spacing,
              },
            },
          },
        },
        plugins
      );
    });
  }
}

new CarouselBoxesComponent().runOnReady();
