import { Controller } from "@hotwired/stimulus";
import { Splide } from "@splidejs/splide";
import "@splidejs/splide/css";

export default class extends Controller {
    connect() {
        if (this.element.dataset.productGalleryMounted === "true") {
            return;
        }

        this.splide = new Splide(this.element, {
            type: "slide",
            rewind: true,
            arrows: false,
            pagination: true,
            drag: true,
            speed: 500,
            gap: 0,
            perPage: 1,
            perMove: 1,
        });

        this.splide.mount();
        this.element.dataset.productGalleryMounted = "true";
    }

    disconnect() {
        if (this.splide) {
            this.splide.destroy(true);
            this.splide = null;
        }

        delete this.element.dataset.productGalleryMounted;
    }
}
