<template>
    <div class="swiper menu-swiper" :class="$route.path.includes('menu') ? 'mb-6 sm:mb-12' : 'mb-12'">
        <Swiper dir="ltr" :speed="500" :slides-per-view="5" :space-between="24" :breakpoints="breakpoints" navigation
            pagination class="meal-swiper">
            <SwiperSlide v-for="category in categories">
                <router-link type="button" v-if="design === categoryDesignEnum.FIRST"
                    :to="{ name: 'frontend.menu', query: { s: category.slug } }"
                    class="w-full !flex flex-col items-center text-center gap-y-3 sm:gap-y-6 p-3 sm:p-6 pb-2 sm:pb-4 rounded-2xl group sm:pb-4 rounded-2xl transition group hover:bg-primary-light bg-[#F7F7FC]">
                    <img class="h-9 sm:h-[100px] drop-shadow-category" :src="category.thumb" :alt="category.name">
                    <h3 class="text-sm sm:text-[22px] font-semibold group-hover:text-primary leading-6">
                        {{ category.name }}
                    </h3>
                </router-link>
                <router-link type="button" v-else-if="design === categoryDesignEnum.SECOND"
                    :to="{ name: 'frontend.menu', query: { s: category.slug } }"
                    class="w-full !flex flex-col items-center text-center gap-y-3 sm:gap-y-6 p-3 sm:p-6 pb-2 sm:pb-6 rounded-2xl sm:rounded-[32px] group"
                    :class="$route.path.includes('menu') && checkIsQueryAndRouteQuerySame(category.slug) ? 'bg-primary-light border-b-4 border-transparent border-b-primary swiper-slide-next' : 'hover:bg-primary-light bg-transparent border-b-4 border-transparent hover:border-b-primary'">
                    <img class="h-9 sm:h-[72px] drop-shadow-category" :src="category.thumb" :alt="category.name">
                    <h3 class="text-sm sm:text-[22px] font-semibold group-hover:text-primary leading-6">
                        {{ category.name }}
                    </h3>
                </router-link>
            </SwiperSlide>
        </Swiper>
    </div>
</template>

<script>

import categoryDesignEnum from "../../../enums/modules/categoryDesignEnum";
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import { ref } from "vue";

export default {
    name: "CategoryComponent",
    props: {
        categories: Object,
        design: Number
    },
    components: {
        Swiper,
        SwiperSlide
    },
    setup() {
        const breakpoints = ref({
            0: { slidesPerView: 3, spaceBetween: 16 },
            600: { slidesPerView: 3, spaceBetween: 16 },
            900: { slidesPerView: 5, spaceBetween: 24 },
            1280: { slidesPerView: 5, spaceBetween: 24 }
        });

        return { breakpoints };
    },
    data() {
        return {
            currentCategory: "",
            categoryDesignEnum: categoryDesignEnum
        }
    },
    mounted() {
        if (this.$route.query.s !== "undefined") {
            this.currentCategory = this.$route.query.s;
        }
    },
    methods: {
        submit: function (msg, e) {
            e.stopPropagation()
        },
        checkIsQueryAndRouteQuerySame(query) {
            if (this.currentCategory === query) {
                return true;
            }
        }
    },
    watch: {
        $route(to, from) {
            if (to.query.s !== "undefined") {
                this.currentCategory = to.query.s;
            }
        }
    }
}
</script>