<script lang="ts" setup>
// import

import useGetCategories from "~/composables/api/product/useGetCategories";

// state

const { data: categories, suspense } = useGetCategories();

const search = ref("");
const debouncedSearch = refDebounced(search, 300);

const selectedCategory = ref("همه دسته ها");

// computed

const mainCategoriesMenu = computed(() => {
    const categoriesList = categories.value
        ? categories.value.map((category) => category.name)
        : [];
    categoriesList.unshift("همه دسته ها");

    return categoriesList;
});

const filteredCategories = computed(() => {
    if (categories.value) {
        return categories.value
            .flatMap((mainCategory) => mainCategory.subcategorys)
            .filter((category) => {
                if (selectedCategory.value === "همه دسته ها") {
                    return category.name.includes(debouncedSearch.value);
                }

                return (
                    category.name.includes(debouncedSearch.value) &&
                    category.parent === selectedCategory.value
                );
            });
    }
    return [];
});

// ssr

const response = await suspense();

if (response.isError) {
    throw createError({
        statusCode: 500,
        statusMessage: `Error in categories page prefetch`,
    });
}
</script>

<template>
    <div class="container">
        <div class="pt-20 pb-8 sm:py-20 flex gap-12 sm:gap-6 justify-between items-center max-sm:flex-col max-sm:items-start">
            <span class="typo-h-5 lg:typo-h-4 text-black">دسته بندی ها</span>
            <div class="flex items-center gap-4 sm:gap-8 max-sm:w-full">
                <Input
                    class="max-w-[400px] w-full rounded-full h-[38px] lg:h-[50px]"
                    variant="outlined"
                    placeholder="جستجو..."
                    v-model="search"
                >
                    <template #endItem>
                        <div class="flex items-center gap-1">
                            <Icon
                                class="translate-y-[-1px] size-[18px] lg:size-[24px]"
                                name="ci:search"
                            />
                        </div>
                    </template>
                </Input>

                <Select
                    class="whitespace-nowrap max-sm:w-full"
                    :options="mainCategoriesMenu"
                    variant="outlined"
                    placeholder="انتخاب کنید"
                    v-model="selectedCategory"
                />
            </div>
        </div>

        <Transition name="fade" mode="out-in">
            <div
                v-if="filteredCategories.length > 0"
                v-auto-animate
                class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 sm:gap-8 w-full"
            >
                <CategoryCard
                    v-for="category in filteredCategories"
                    :key="category.id"
                    :id="category.id"
                    :category="category.name"
                    :picture="category.image"
                    :count="20"
                    description="یک دسته بندی تست"
                    dark-layer
                />
            </div>

            <div v-else class="flex w-full sm:mt-12">
                <div
                    class="flex-col flex-grow py-32 sm:py-[12rem] gap-6 border-2 border-slate-200 border-dashed size-full rounded-100 flex-center"
                >
                    <Icon name="bi:search" class="**:fill-gray-500 size-[40px] sm:size-[50px]" />
                    <span class="text-lg text-gray-500">
                        دسته بندی یافت نشد :(
                    </span>
                </div>
            </div>
        </Transition>
    </div>
</template>
