import { Splide } from "@splidejs/splide";
import "@splidejs/splide/css";
import VendorCarouselController from "@cpcreation/viti-core/controllers/carousel_controller";

export default class extends VendorCarouselController {
    static targets = ["next", "previous", "progress", "progressBar"];

    connect() {
        if (this.splide) {
            this.splide.destroy(true);
        }

        this.splide = new Splide(this.element, this.collectionOptions);
        this.splide.on("mounted moved refreshed resized updated", () => {
            this.updateInterface();
        });
        this.splide.on("move", (newIndex) => {
            this.updateInterface(newIndex);
        });
        this.splide.mount();
    }

    updateInterface(index = this.splide?.index ?? 0) {
        this.releaseHaloOverflow();
        this.updateNavigationState(index);
        this.updateCollectionProgress(index);
    }

    updateNavigationState(index) {
        if (!this.splide) {
            return;
        }

        const endIndex = this.splide.Components.Controller.getEnd();
        const safeIndex = Math.max(0, Math.min(index, endIndex));
        const hasSlides = endIndex > 0;

        this.element.classList.toggle("collection-carousel--static", !hasSlides);

        if (this.hasPreviousTarget) {
            this.previousTarget.hidden = !hasSlides;
            this.previousTarget.disabled = safeIndex <= 0;
        }

        if (this.hasNextTarget) {
            this.nextTarget.hidden = !hasSlides;
            this.nextTarget.disabled = safeIndex >= endIndex;
        }
    }

    updateCollectionProgress(index) {
        if (!this.splide || !this.hasProgressBarTarget) {
            return;
        }

        const endIndex = this.splide.Components.Controller.getEnd();
        const safeIndex = Math.max(0, Math.min(index, endIndex));
        const progress = endIndex <= 0 ? 1 : (safeIndex + 1) / (endIndex + 1);
        const percentage = Math.round(progress * 100);

        if (this.hasProgressTarget) {
            this.progressTarget.hidden = endIndex <= 0;
            this.progressTarget.setAttribute("aria-valuenow", `${percentage}`);
        }

        this.progressBarTarget.style.transform = `scaleX(${progress})`;
    }

    releaseHaloOverflow() {
        const wrappers = [
            this.element.querySelector(".splide__track"),
            this.element.querySelector(".splide__list"),
            this.element.querySelector(".splide__track")?.parentElement,
        ];

        wrappers.filter(Boolean).forEach((element) => {
            element.style.setProperty("overflow", "visible", "important");
        });
    }

    get collectionOptions() {
        return {
            type: "slide",
            easing: "cubic-bezier(.22,1,.36,1)",
            speed: 560,
            pagination: false,
            arrows: false,
            drag: true,
            snap: true,
            focus: 0,
            trimSpace: true,
            omitEnd: true,
            waitForTransition: false,
            updateOnMove: true,
            flickPower: 80,
            flickMaxPages: 1,
            perPage: 3.25,
            perMove: 1,
            gap: "1rem",
            breakpoints: {
                1200: {
                    perPage: 2.25,
                    gap: "0.875rem",
                },
                900: {
                    perPage: 1.25,
                    gap: "0.625rem",
                },
                640: {
                    perPage: 1.25,
                    gap: "0.5rem",
                    focus: "center",
                    trimSpace: false,
                    padding: "0.75rem",
                },
            },
        };
    }
}
