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

import useGetSavedProducts from "~/composables/api/products/useSavedProducts";

// meta

useSeoMeta({
    title: "پنل کاربری محصولات ذخیره شده",
});

definePageMeta({
    middleware: "check-is-logged-in",
    layout: "profile",
});

// states

const { data, isLoading: productsIsLoading } = useGetSavedProducts();

// computed

const products = computed(() => {
    return data.value?.results.flat();
});

const paginationData = computed(() => {
    return data.value?.results.map((_, i: number) => {
        return { type: "page", value: i };
    });
});
</script>

<template>
    <div class="w-full flex flex-col gap-5">
        <ProfilePageTitle
            title="علاقه‌مندی های شما"
            icon="ci:bi-bookmark"
        />

        <ProfileSection :title="`${paginationData?.length} محصول`">
            <template #button>
                <Button
                    end-icon="ci:chevron-left"
                    size="md"
                    class="rounded-full transition-all"
                    variant="solid"
                    @click="navigateTo({ name: 'products-slug' })"
                >
                    <span class="whitespace-pre @max-[64rem]::text-xs"> همه محصولات </span>
                </Button>
            </template>
            <div class="w-full">
                <ul
                    v-if="productsIsLoading"
                    class="grid grid-cols-2 @min-[40rem]:grid-cols-3 @min-[64rem]:grid-cols-4 @min-[80rem]:grid-cols-5 gap-y-8 gap-5 @min-[40rem]:gap-8 w-full"
                >
                    <div
                        class="w-full flex flex-col gap-3"
                        v-for="i in 10"
                        :key="i"
                    >
                        <Skeleton
                            v-for="i in 3"
                            :key="i"
                            class="w-full"
                            :class="{
                                '!h-[11.9rem] @min-[64rem]:!h-[17.25rem] !rounded-2xl': i == 1,
                                '!h-[1.4rem] @min-[64rem]:!h-[1.5rem] !rounded-sm': [2, 3].includes(i),
                                '!w-1/2 @min-[64rem]:!w-full': i == 2,
                                '@min-[64rem]:!w-1/2': i == 3,
                            }"
                        />
                    </div>
                </ul>
                <div
                    v-else
                    class="w-full h-max"
                >
                    <div
                        v-if="!products?.length"
                        class="flex flex-grow w-full"
                    >
                        <Placeholder
                            title="محصولی یافت نشد :("
                            icon="ci:bi-search"
                        />
                    </div>
                    <ProductsGrid
                        :with-header="false"
                        :products="products!"
                        class="!p-0"
                    />
                    <div
                        v-if="data && paginationData && data.count > 15"
                        class="w-full flex-center py-10 mt-5 @min-[64rem]:mt-10"
                    >
                        <Pagination
                            :items="paginationData"
                            :total="data.count"
                            :per-page="15"
                        />
                    </div>
                </div>
            </div>
        </ProfileSection>
    </div>
</template>
