<script setup>
import {ref, onMounted, onBeforeUnmount} from 'vue';
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout.vue";
import {Head} from "@inertiajs/vue3";

const slides = ref([
    { image: 'https://cdn.pixabay.com/photo/2021/09/12/18/07/robin-6619184_1280.jpg', title: 'Slide 1', description: 'Description for Slide 1', animation: 'fade' },
    { image: 'https://cdn.pixabay.com/photo/2022/12/13/17/55/robin-7653878_1280.jpg', title: 'Slide 2', description: 'Description for Slide 2', animation: 'zoom' },
    { image: 'https://cdn.pixabay.com/photo/2017/03/05/21/06/bird-2119874_1280.jpg', title: 'Slide 3', description: 'Description for Slide 3', animation: 'rotate' },
    { image: 'https://cdn.pixabay.com/photo/2016/11/19/14/52/bird-1839689_1280.jpg', title: 'Slide 4', description: 'Description for Slide 4', animation: 'slide-up' },
    { image: 'https://cdn.pixabay.com/photo/2015/06/22/22/41/robin-818126_1280.jpg', title: 'Slide 5', description: 'Description for Slide 5', animation: 'slide-down' },
]);

const currentIndex = ref(0);
const slideInterval = ref(null);
const slideSpeed = 5000; // 4 seconds per slide
const isAutoPlay = ref(true);

const nextSlide = () => {
    currentIndex.value = (currentIndex.value + 1) % slides.value.length;
};

const prevSlide = () => {
    currentIndex.value = (currentIndex.value - 1 + slides.value.length) % slides.value.length;
};

const goToSlide = (index) => {
    currentIndex.value = index;
};

const startAutoSlide = () => {
    if (isAutoPlay.value) {
        slideInterval.value = setInterval(nextSlide, slideSpeed);
    }
};

const pauseAutoSlide = () => {
    clearInterval(slideInterval.value);
};

const toggleAutoPlay = () => {
    isAutoPlay.value = !isAutoPlay.value;
    if (isAutoPlay.value) {
        startAutoSlide();
    } else {
        pauseAutoSlide();
    }
};

// Touch events for swipe
let touchStartX = 0;
const handleTouchStart = (event) => {
    touchStartX = event.touches[0].clientX;
};

const handleTouchEnd = (event) => {
    let touchEndX = event.changedTouches[0].clientX;
    let diff = touchStartX - touchEndX;
    if (diff > 50) {
        nextSlide(); // Swipe left
    } else if (diff < -50) {
        prevSlide(); // Swipe right
    }
};

// Keyboard Navigation
const handleKeydown = (event) => {
    if (event.key === 'ArrowRight') {
        nextSlide();
    } else if (event.key === 'ArrowLeft') {
        prevSlide();
    }
};

onMounted(() => {
    startAutoSlide();
    window.addEventListener('keydown', handleKeydown);
});

onBeforeUnmount(() => {
    pauseAutoSlide();
    window.removeEventListener('keydown', handleKeydown);
});

const props = defineProps({
    test:{
        type:String
    }
})
</script>

<template>
    <Head title="Carousel">
        <meta name="description" content="Custom Tailwind Carousel">
    </Head>


    <AuthenticatedLayout>
        <template #header>
            <h2
                class="text-xl font-semibold leading-tight text-gray-800"
            >
                Carousel
            </h2>
        </template>


        <div class="relative w-full max-w-3xl mx-auto overflow-hidden group carousel-wrapper">
            <!-- Slides -->
            <div
                class="relative flex transition-transform duration-1000 ease-in-out slide-wrapper"
                :style="{ transform: `translateX(-${currentIndex * 100}%)` }"
                @mouseenter="pauseAutoSlide"
                @mouseleave="startAutoSlide"
                @touchstart="handleTouchStart"
                @touchend="handleTouchEnd"
            >
                <div
                    v-for="(slide, index) in slides"
                    :key="index"
                    class="w-full flex-shrink-0 inset-0 opacity-0 transition-opacity duration-1000 ease-in-out"
                    :class="{
          'opacity-100': index === currentIndex,
          'animate-fade': (slide.animation === 'fade' && index === currentIndex),
          'animate-zoom': (slide.animation === 'zoom' && index === currentIndex),
          'animate-rotate': (slide.animation === 'rotate' && index === currentIndex),
          'animate-slide-up': (slide.animation === 'slide-up' && index === currentIndex),
          'animate-slide-down': (slide.animation === 'slide-down' && index === currentIndex),
        }"
                >
                    <img :src="slide.image" :alt="slide.title" class="w-full h-64 object-cover rounded-lg slide-img" />

                    <div class="p-4 bg-white text-center slide-info">
                        <h2 class="text-xl font-semibold">{{ slide.title }}</h2>
                        <p class="text-gray-600">{{ slide.description }}</p>
                        <button class="mt-2 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">More Details</button>
                    </div>
                </div>
            </div>

            <!-- Navigation Buttons -->
            <button
                class="absolute top-1/2 left-2 transform -translate-y-1/2 bg-gray-800 text-white p-2 rounded-full opacity-0 group-hover:opacity-100 transition-opacity"
                @click="prevSlide"
            >‹</button>
            <button
                class="absolute top-1/2 right-2 transform -translate-y-1/2 bg-gray-800 text-white p-2 rounded-full opacity-0 group-hover:opacity-100 transition-opacity"
                @click="nextSlide"
            >›</button>

            <!-- Dots Navigation -->
            <div class="bottom-1/2 left-1/2 flex justify-center mt-4">
                <span v-for="(slide, index) in slides" :key="index" class="w-3 h-3 mx-1 rounded-full cursor-pointer" :class="index === currentIndex ? 'bg-blue-500' : 'bg-gray-300'" @click="goToSlide(index)"></span>
            </div>

            <!-- Toggle Autoplay -->
            <div class="flex justify-center mt-2">
                <button
                    class="px-3 py-1 bg-gray-600 text-white text-sm rounded"
                    @click="toggleAutoPlay"
                >
                    {{ isAutoPlay ? "Pause" : "Play" }} Autoplay
                </button>
            </div>
        </div>
    </AuthenticatedLayout>
</template>



<style scoped>
/* Animations */
@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes zoom-in {
    from { transform: scale(0.2); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
@keyframes rotate-in {
    from { transform: rotate(-360deg); opacity: 0; }
    to { transform: rotate(0deg); opacity: 1; }
}
@keyframes slide-up {
    from { transform: translateY(150px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
@keyframes slide-down {
    from { transform: translateY(-150px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Apply animations */
.animate-fade { animation: fade-in 2s ease-in-out; }
.animate-zoom { animation: zoom-in 2s ease-in-out; }
.animate-rotate { animation: rotate-in 2s ease-in-out; }
.animate-slide-up { animation: slide-up 2s ease-in-out; }
.animate-slide-down { animation: slide-down 2s ease-in-out; }

.carousel-wrapper{}
.slide-wrapper{}
.slide-img{
    height: auto;
    max-height: 480px;
}
.slide-info{
    width: 100%;
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    bottom: 0;
    border-radius: 0 0 10px 10px;
}
.slide-info h2{
    color: #e5e7eb;
}

.slide-info p{
    color: #e5e7eb;
}

</style>
