import Alpine from 'alpinejs'
import intersect from '@alpinejs/intersect'
import collapse from '@alpinejs/collapse'

Alpine.plugin(intersect)
Alpine.plugin(collapse)

Alpine.data('heroCarousel', () => ({
    current: 0,
    slides: [],
    interval: null,
    touchStartX: 0,
    touchEndX: 0,

    get total() {
        return this.slides.length
    },

    get hasMultiple() {
        return this.total > 1
    },

    init(slides) {
        this.slides = slides
        if (this.hasMultiple) {
            this.interval = setInterval(() => this.next(), 6000)
        }
    },

    next() {
        this.current = (this.current + 1) % this.total
    },

    prev() {
        this.current = (this.current - 1 + this.total) % this.total
    },

    goTo(index) {
        this.current = index
    },

    pause() {
        if (this.interval) {
            clearInterval(this.interval)
            this.interval = null
        }
    },

    resume() {
        if (this.hasMultiple && !this.interval) {
            this.interval = setInterval(() => this.next(), 6000)
        }
    },

    touchStart(e) {
        this.touchStartX = e.changedTouches[0].screenX
    },

    touchEnd(e) {
        this.touchEndX = e.changedTouches[0].screenX
        const diff = this.touchStartX - this.touchEndX
        if (Math.abs(diff) > 50) {
            diff > 0 ? this.next() : this.prev()
        }
    },
}))

Alpine.data('productCarousel', () => ({
    current: 0,
    slides: [],
    interval: null,
    touchStartX: 0,
    touchEndX: 0,

    get total() {
        return this.slides.length
    },

    initCarousel(slides) {
        this.slides = slides
        if (this.total > 1) {
            this.interval = setInterval(() => this.next(), 4500)
        }
    },

    next() {
        this.current = (this.current + 1) % this.total
    },

    goTo(index) {
        this.current = index
        this.resetTimer()
    },

    pause() {
        if (this.interval) {
            clearInterval(this.interval)
            this.interval = null
        }
    },

    resume() {
        if (this.total > 1 && !this.interval) {
            this.interval = setInterval(() => this.next(), 4500)
        }
    },

    resetTimer() {
        this.pause()
        this.resume()
    },

    touchStart(e) {
        this.touchStartX = e.changedTouches[0].screenX
    },

    touchEnd(e) {
        this.touchEndX = e.changedTouches[0].screenX
        const diff = this.touchStartX - this.touchEndX
        if (Math.abs(diff) > 50) {
            diff > 0 ? this.next() : this.prev()
        }
    },

    prev() {
        this.current = (this.current - 1 + this.total) % this.total
        this.resetTimer()
    },
}))

Alpine.data('testimonialCarousel', () => ({
    current: 0,
    total: 0,
    interval: null,

    get trackStyle() {
        const cardWidth = 320;
        const gap = 24;
        const offset = (cardWidth + gap) * this.current;
        return 'transform: translateX(-' + offset + 'px)';
    },

    init() {
        this.total = this.$el.querySelectorAll('.testimonial-card').length;
        if (this.total > 1) {
            this.interval = setInterval(() => this.next(), 5000);
        }
    },

    next() {
        this.current = (this.current + 1) % this.total;
        this.resetTimer();
    },

    prev() {
        this.current = (this.current - 1 + this.total) % this.total;
        this.resetTimer();
    },

    goTo(index) {
        this.current = index;
        this.resetTimer();
    },

    pause() {
        if (this.interval) {
            clearInterval(this.interval);
            this.interval = null;
        }
    },

    resume() {
        if (this.total > 1 && !this.interval) {
            this.interval = setInterval(() => this.next(), 5000);
        }
    },

    resetTimer() {
        this.pause();
        this.resume();
    },
}))

Alpine.start()
