<template>
    <LoadingComponent :props="loading" />

    <!--========BANNER PART START===========-->
    <BannerComponent />
    <!--========BANNER PART END=============-->

    <!--========Category PART START=========-->
    <section class="container mb-16 sm:mb-20" v-if="categories.length > 0">
        <h2 class="text-center font-semibold text-[22px] sm:text-[32px] mb-2 sm:mb-4">{{ $t('label.what_we') }}
            <span class="text-primary"> {{ $t('label.serve') }} </span> {{ $t('label.you') }}
        </h2>
        <p class="text-sm sm:text-base font-normal text-center mb-2.5 sm:mb-6">{{ $t('label.category_short_text')
            }}</p>

        <CategoryComponent :categories="categories" :design="categoryProps.design" />
    </section>
    <!--========Category PART END===========-->

    <!--========ABOUT US PART START=========-->
    <AboutUsComponent />
    <!--========ABOUT US PART END=========-->

    <!--========WHY BEST PART START=========-->
    <WhyBestComponent />
    <!--========WHY BEST PART END=========-->

    <!--========WHY BEST PART START=========-->
    <ImageGalleryComponent />
    <!--========WHY BEST PART END=========-->

    <!--========FAQ START=========-->
    <FaqComponent />
    <!--========FAQ End=========-->

</template>

<script>
import BannerComponent from "./BannerComponent.vue";
import AboutUsComponent from "./AboutUsComponent.vue";
import WhyBestComponent from "./WhyBestComponent.vue";
import ImageGalleryComponent from "./ImageGalleryComponent.vue";
import CategoryComponent from "../components/CategoryComponent.vue";
import categoryDesignEnum from "../../../enums/modules/categoryDesignEnum";
import statusEnum from "../../../enums/modules/statusEnum";
import LoadingComponent from "../components/LoadingComponent.vue";
import FaqComponent from "./FaqComponent.vue";
import { useFrontendItemCategoryStore } from "../../../stores/frontend/frontendItemCategory";

export default {
    name: "HomeComponent",
    components: {
        CategoryComponent,
        BannerComponent,
        AboutUsComponent,
        LoadingComponent,
        WhyBestComponent,
        FaqComponent,
        ImageGalleryComponent
    },
    data() {
        return {
            loading: {
                isActive: false,
            },
            categoryProps: {
                design: categoryDesignEnum.FIRST,
                slug: '',
            },
            limit: 4,
            frontendItemCategoryStore: useFrontendItemCategoryStore(),
        };
    },
    computed: {
        categories: function () {
            return this.frontendItemCategoryStore.lists;
        },
    },
    mounted() {
        this.loading.isActive = true;
        this.frontendItemCategoryStore.fetchLists({
            paginate: 0,
            order_column: "sort",
            order_type: "asc",
            status: statusEnum.ACTIVE,
        }).then(res => {
            this.loading.isActive = false;
        }).catch((err) => {
            this.loading.isActive = false;
        });
    },
    watch: {
        categories: {
            deep: true,
            handler(category) {
                if (category.length > 0) {
                    if (category[0].slug !== "undefined") {
                        this.categoryProps.slug = category[0].slug;
                    }
                }
            },
        },
    },
};
</script>