<script setup>
import {ref, onMounted, onBeforeUnmount} from 'vue';

const testimonials = ref([
    {
        id:1,
        client:'Judith Black',
        designation:'CEO of Tuple',
        client_photo:'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
        company_logo:'https://tailwindui.com/plus/img/logos/tuple-logo-gray-900.svg',
        review:'Amet amet eget scelerisque tellus sit neque faucibus non eleifend. Integer eu praesent at a. Ornare arcu gravida natoque erat et cursus tortor consequat at. Vulputate gravida sociis enim nullam ultricies habitant malesuada lorem ac. Tincidunt urna dui pellentesque sagittis.',
        animation: 'fade'
    },
    {
        id:2,
        client:'Joseph Rodriguez',
        designation:'CEO of Reform',
        client_photo:'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
        company_logo:'https://tailwindui.com/plus/img/logos/reform-logo-gray-900.svg',
        review:'Amet amet eget scelerisque tellus sit neque faucibus non eleifend. Integer eu praesent at a. Ornare arcu gravida natoque erat et cursus tortor consequat at. Vulputate gravida sociis enim nullam ultricies habitant malesuada lorem ac. Tincidunt urna dui pellentesque sagittis.',
        animation: 'fade'
    },
    {
        id:3,
        client:'Judith Black',
        designation:'CEO of Tuple',
        client_photo:'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
        company_logo:'https://tailwindui.com/plus/img/logos/tuple-logo-gray-900.svg',
        review:'Amet amet eget scelerisque tellus sit neque faucibus non eleifend. Integer eu praesent at a. Ornare arcu gravida natoque erat et cursus tortor consequat at. Vulputate gravida sociis enim nullam ultricies habitant malesuada lorem ac. Tincidunt urna dui pellentesque sagittis.',
        animation: 'fade'
    },
]);

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

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

const prevSlide = () => {
    currentIndex.value = (currentIndex.value - 1 + testimonials.value.length) % testimonials.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>
    <div class="relative md:w-full w-11/12 mx-auto overflow-hidden group carousel-wrapper pb-20">
        <!-- Slides -->
        <div
            class="relative flex transition-transform duration-[1500ms] ease-in-out slide-wrapper"
            :style="{ transform: `translateX(-${currentIndex * 100}%)` }"
            @mouseenter="pauseAutoSlide"
            @mouseleave="startAutoSlide"
            @touchstart="handleTouchStart"
            @touchend="handleTouchEnd"
        >
            <div
                v-for="(slide, index) in testimonials"
                :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),
        }"
            >
                <div class="flex flex-col border-t border-gray-900/10 pt-10 sm:pt-16 lg:border-l lg:border-t-0 lg:pl-8 lg:pt-0 xl:pl-20">
                    <img class="h-12 self-start" :src="slide.company_logo" alt="" />
                    <figure class="mt-10 flex flex-auto flex-col justify-between">
                        <blockquote class="text-lg/8 text-gray-900">
                            <p class="text-center md:text-left">“{{slide.review}}”</p>
                        </blockquote>
                        <figcaption class="mt-10 flex items-center gap-x-6">
                            <img class="size-14 rounded-full bg-gray-50" :src="slide.client_photo" alt="" />
                            <div class="text-base">
                                <div class="font-semibold text-gray-900">{{slide.client}}</div>
                                <div class="mt-1 text-gray-500">{{slide.designation}}</div>
                            </div>
                        </figcaption>
                    </figure>
                </div>

            </div>
        </div>

        <!-- Navigation Buttons -->
        <button
            class="prev-next 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="prev-next 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 testimonials" :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" v-if="showPlayPauseButton">
            <button
                class="px-3 py-1 bg-gray-600 text-white text-sm rounded"
                @click="toggleAutoPlay"
            >
                {{ isAutoPlay ? "Pause" : "Play" }} Autoplay
            </button>
        </div>
    </div>
</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;
}
.prev-next{
    width: 50px;
    height: 50px;
    transition: all 0.5s;
}
</style>
