<script setup>
    import { ref, watch, onMounted, computed } from "vue"
    import CardEvent from "./card-event.vue"
    import { Carousel, Navigation, Slide } from 'vue3-carousel'
    import 'vue3-carousel/dist/carousel.css'

    const { width: windowWidth } = useWindowSize();
    const userData = useCookie('userData').value
    const loading = ref(false)
    const eventos = ref([])

    onMounted(() => {
        getEventos()
    })


    const isMobile = ref(false)
    isMobile.value = windowWidth.value < 768

    watch(windowWidth, () => {
        isMobile.value = windowWidth.value < 768
    })


    const getEventos = async () => {
        loading.value = true;

        try {
            const response = await $api('/events/getAll/u', {
                method: 'GET',
                query: {
                    itemsPerPage: 10,
                    userData: JSON.stringify(userData),
                }
            })

            if (!response) return

            console.log('Eventos:', response)

            eventos.value = response.eventos;
        } catch (error) {
            console.error('Erro ao buscar eventos:', error, error.response)

            eventos.value = [];
        }
        loading.value = false;
    }


    const currentSlideModel = ref(0);

    const nextSlide = () => {
        currentSlideModel.value += isMobile ? 1 : 2;
        if (currentSlideModel.value >= eventos.value.length) {
            currentSlideModel.value = 0;
        }
    };

    const prevSlide = () => {
        currentSlideModel.value -= isMobile ? 1 : 2;
        if (currentSlideModel.value < 0) {
            currentSlideModel.value = eventos.value.length - 1;
        }
    };

</script>
<template>
    <div v-if="eventos.length > 0 || loading" class="position-relative">
        <Carousel :items-to-show="isMobile ? 1 : 3" ref="carousel" v-model="currentSlideModel" :autoplay="4000"
            :style="!isMobile ? 'margin-left: 45px; margin-right: 45px;' : ''"
            :snapAlign="eventos.length >= 3 ? 'center' : 'start'">
            <template #slides="{ slideWidth, currentSlide }">
                <Slide v-for="(event, index) in eventos" :key="event.id">
                    <CardEvent :event="event" :isHomePage="true" />
                </Slide>
            </template>
        </Carousel>

        <div class="d-flex justify-space-between align-center flex-row w-100 position-absolute" style="top: 45%;"
            v-if="!isMobile">
            <v-btn variant="elevated" icon @click="prevSlide" color="primary" size="small">
                <v-icon icon="tabler-caret-left-filled" color="white" size="25" />
            </v-btn>

            <v-btn variant="elevated" icon @click="nextSlide" color="primary" size="small">
                <v-icon icon="tabler-caret-right-filled" color="white" size="25" />
            </v-btn>
        </div>

    </div>
    <!-- <v-slide-group show-arrows mobile-breakpoint="sm" class="position-relative slide-home"
        v-if="eventos && eventos.length > 0">
        <v-slide-group-item v-for="event in eventos" :key="event.id">
            <CardEvent :event="event" :isHomePage="true"  class="mr-3 mb-3" />
        </v-slide-group-item>

        <template #prev>
            <VBtn color="primary" icon size="x-small">
                <v-icon icon="tabler-chevron-left" size="20" />
            </VBtn>

        </template>

        <template #next>
            <VBtn color="primary" icon size="x-small">
                <v-icon icon="tabler-chevron-right" size="20" />
            </VBtn>
        </template>
    </v-slide-group> -->

    <p class="text-center font-weight-bold" v-else>
        <VIcon icon="tabler-mood-sad" color="primary" size="22" />
        Nenhum evento disponível no momento.
    </p>
</template>