import * as $ from "jquery";
import { InobyModule } from "@lib/inoby-module";
import KeenSlider from "keen-slider";
import { dots } from "@lib/keen-slider-plugins";

class ReferencesComponent extends InobyModule {
  run() {
    const $elements = $(".component-references .references-slider");

    $elements.each(function () {
      var numslides = Number($(this).data("numslides"));
      var perslide = Number($(this).data("slides"));
      const plugins = [];
      if (numslides > 1) {
        plugins.push(dots);
        $(this).addClass("keen-slider");
      }
      var slider = new KeenSlider(
        this,
        {
          selector: ".reference-box",
          loop: true,
          slides: {
            origin: "auto",
            perView: perslide,
            spacing: 30,
          },
          breakpoints: {
            "(min-width: 320px)": {
              slides: {
                perView: 1,
                origin: "center",
                spacing: 15,
              },
            },
            "(min-width: 576px)": {
              slides: {
                perView: 1,
                origin: "center",
                spacing: 30,
              },
            },
            "(min-width: 768px)": {
              slides: {
                perView: 2,
                spacing: 30,
              },
            },
            "(min-width: 1200px)": {
              slides: {
                perView: perslide,
                spacing: 30,
              },
            },
          },
        },
        plugins
      );
    });
  }
}

new ReferencesComponent().runOnReady();
