<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);

// computed

const filteredCategories = computed(() => {

    if (debouncedSearch.value.length > 0) {
        return categories.value!.map((cat) => {
            const copyOfCategory = { ...cat };
            copyOfCategory.subcategorys = copyOfCategory.subcategorys.filter((subcat) => {
                return subcat.name.includes(debouncedSearch.value);
            });

            return copyOfCategory;
        });
    }

    return categories.value!;
});

// 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="py-[5rem] flex gap-6 justify-between items-center">
            <span class="typo-h-3 text-black">دسته بندی ها</span>
            <Input
                class="max-w-[400px] w-full rounded-full"
                variant="outlined"
                placeholder="جستجو..."
                v-model="search"
            >
                <template #endItem>
                    <div class="flex items-center gap-1">
                        <Icon
                            class="translate-y-[-1px]"
                            name="ci:search"
                            size="24"
                        />
                    </div>
                </template>
            </Input>
        </div>
        <Transition name="fade" mode="out-in">
            <div
                class="flex flex-col gap-20"
                v-if="filteredCategories.some(cat => cat.subcategorys.length > 0)"
            >

                <template v-for="mainCategory in filteredCategories">
                    <div
                        class="flex flex-col gap-12"
                        v-if="mainCategory.subcategorys.length > 0"
                    >
                        <div class="w-full flex items-center justify-between gap-8">
                            <div class="flex items-center gap-2">
                                <!--                                <img :src="mainCategory.icon" alt="" class="w-[30px] opacity-50" />-->
                                <span class="typo-h-5">
                                    {{ mainCategory.name }}
                                </span>
                            </div>
                            <div class="h-px w-full bg-slate-200" />
                        </div>
                        <div
                            v-auto-animate
                            class="grid grid-cols-3 gap-4 w-full"
                        >
                            <CategoryCard
                                v-for="category in mainCategory.subcategorys"
                                :key="category.id"
                                :id="category.id"
                                :category="category.name"
                                :picture="category.image"
                                :count="20"
                                description="یک دسته بندی تستasdasd"
                                dark-layer
                            />
                        </div>
                    </div>
                </template>

            </div>

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