<script setup lang="ts">

// import

import { useAppParams } from "~/composables/global/useAppParams";
import useGetProducts from "~/composables/api/products/useGetProducts";

// meta

definePageMeta({
    validate: (route) => {
        if (Array.isArray(route.params.slug)) {
            return route.params.slug.length === 2 && route.params.slug[0].startsWith("category");
        }

        return true;
    },
});

// state

const { search } = useAppParams();

// queries

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

// computed

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

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

// seo

useSeoMeta({
    title: "محصولات",
});
</script>

<template>
    <div class="w-full container flex flex-col">
        <div class="w-full flex flex-col lg:flex-row justify-end items-end py-[3.5rem] lg:py-[5rem] gap-10 lg:gap-5">
            <div class="flex flex-col items-center lg:items-start gap-[1rem] lg:gap-[1.5rem] text-black w-full">
                <h1 class="typo-h-5 lg:typo-h-4">لیست محصولات</h1>
            </div>

            <div class="w-full flex items-center justify-between lg:justify-end gap-4">
                <Input
                    placeholder="جست و جو محصول ..."
                    v-model="search"
                    variant="outlined"
                    class="!rounded-xl w-full lg:w-8/12"
                >
                    <template #endItem>
                        <div class="flex items-center gap-1">
                            <Icon
                                class="translate-y-[-1px] text-[20px] lg:text-[24px]"
                                name="ci:search"
                            />
                        </div>
                    </template>
                </Input>
                <Suspense>
                    <FilterButton>
                        <template #content>
                            <FilterProducts />
                        </template>
                    </FilterButton>
                    <template #fallback>
                        <Skeleton class="!size-11 lg:!w-[10.35rem] lg:!h-[3.35rem] shrink-0 !rounded-xl" />
                    </template>
                </Suspense>
            </div>
        </div>
        <ul
            v-if="productsIsLoading"
            class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-y-8 gap-5 sm: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] lg:!h-[17.25rem] !rounded-2xl': i == 1,
                        '!h-[1.4rem] lg:!h-[1.5rem] !rounded-sm': [2, 3].includes(i),
                        '!w-1/2 lg:!w-full': i == 2,
                        'lg:!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 lg:mt-10"
            >
                <Pagination
                    :items="paginationData"
                    :total="data.count"
                    :per-page="15"
                />
            </div>
        </div>
    </div>
</template>

<style scoped></style>
