import { InobyComponentModule } from "@lib/inoby-module";
import GLightbox, { GLighboxInstance } from "glightbox";
import KeenSlider, { KeenSliderPlugin } from "keen-slider";
import * as $ from "jquery";
import { SliderGallerySettings } from "./slider-gallery.d";
import { arrows, thumbs } from "@lib/keen-slider-plugins";

class SliderGalleryComponent extends InobyComponentModule {
  public metaboxId: string = "inoby-slider-gallery";
  // private spacing: number = 16;
  private lightbox: GLighboxInstance = null;

  public run() {
    // create slider for each component on page
    $(".inoby-slider-gallery").each((i, gallery) => {
      const $gallery = $(gallery);
      const settings = $gallery.data("settings") as SliderGallerySettings;
      settings.spacing = Number.parseInt(
        getComputedStyle(gallery).getPropertyValue("--slider-spacing")
      );
      this.createSlider($gallery, settings);
      if (settings.has_lightbox) {
        this.createLightbox();
      }
    });
  }

  public runAdmin() {
    // preserve fullscreen images in admin
    $(document).on("click", ".gallery-slide", (e: JQuery.ClickEvent) =>
      e.preventDefault()
    );
    $(".inoby-slider-gallery").each((i, gallery) => {
      const $gallery = $(gallery);
      const settings = $gallery.data("settings") as SliderGallerySettings;
      settings.spacing = Number.parseInt(
        getComputedStyle(gallery).getPropertyValue("--slider-spacing")
      );
      this.createSlider($gallery, settings);
    });
  }

  private createSlider(
    $gallery: JQuery<HTMLElement>,
    settings: SliderGallerySettings
  ) {
    const container = $gallery.find(".gallery").get(0);
    let plugins: KeenSliderPlugin[] = [];

    if (settings.has_thumbs) {
      const thumbsSlider = new KeenSlider($gallery.find(".thumbs").get(0), {
        selector: ".thumb",
        slides: {
          perView: 3,
          spacing: settings.spacing,
        },
        breakpoints: {
          "(min-width: 768px)": {
            slides: {
              perView: 6,
              spacing: settings.spacing,
            },
          },
        },
      });

      plugins.push(thumbs(thumbsSlider));
    }

    if (settings.has_arrows) {
      plugins.push(arrows);
    }

    return new KeenSlider(
      container,
      {
        selector: ".gallery-slide",
        slides: {
          perView: 1,
          spacing: settings.spacing,
        },
        breakpoints: {
          "(min-width: 576px)": {
            slides: {
              perView: Math.min(settings.per_view, 2),
              spacing: settings.spacing,
            },
          },
          "(min-width: 768px)": {
            slides: {
              perView: settings.per_view,
              spacing: settings.spacing,
            },
          },
        },
      },
      plugins
    );
  }

  private createLightbox() {
    if (!this.lightbox) {
      this.lightbox = GLightbox({
        selector: ".inoby-slider-gallery .glightbox-slide",
      });
    }
  }
}

new SliderGalleryComponent().runOnReady();
