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

import useGetCartOrders from "~/composables/api/orders/useGetCartOrders";

// meta

useSeoMeta({
    title: "سبد خرید",
});

definePageMeta({
    layout: "cart",
    middleware: "check-is-logged-in",
    prevPage: { name: "index", label: "بازگشت به خانه" },
    nextPage: { name: "cart-delivery", label: "انتخاب آدرس" },
});

// queries

const { data: cart, isLoading: cartIsLoading } = useGetCartOrders();

// computed

const hasCartItem = computed(() => !!cart.value && cart.value.items.length! > 0);
</script>

<template>
    <div class="w-full flex flex-col gap-4 lg:gap-6">
        <div
            v-if="hasCartItem"
            class="flex items-center justify-between w-full gap-3 px-4 py-4 rounded-xl bg-slate-50 border border-slate-200"
        >
            <Skeleton
                v-if="cartIsLoading"
                class="!w-36 !h-[43px] !rounded-lg"
            />

            <div
                v-else
                class="flex items-center w-full gap-2 lg:w-1/2"
            >
                <NuxtImg
                    src="/img/box.gif"
                    loading="lazy"
                    fetch-priority="low"
                    class="size-12 pb-2"
                />
                <p class="font-semibold lg:text-lg text-black">{{ cart?.items.length }} مرسوله</p>
            </div>

            <Skeleton
                v-if="cartIsLoading"
                class="!w-28 !h-[43px] !rounded-full"
            />

            <DeleteCartAllModal v-else />
        </div>

        <ul
            v-if="cartIsLoading"
            class="w-full flex flex-col gap-4 lg:gap-6"
        >
            <Skeleton
                v-for="i in 4"
                :key="i"
                class="w-full !h-[12rem] !rounded-xl"
            />
        </ul>

        <div
            v-else
            class="w-full h-max"
        >
            <div
                v-if="!cart?.items.length"
                class="flex flex-grow w-full"
            >
                <Placeholder
                    title="سبد خرید شما خالی است :("
                    icon="bi:cart"
                >
                    <template #actions>
                        <NuxtLink :to="{ name: 'products' }">
                            <Button
                                class="rounded-full"
                                size="md"
                            >
                                <span> مشاهده محصولات </span>
                                <Icon
                                    name="ci:left-rotation"
                                    size="24"
                                />
                            </Button>
                        </NuxtLink>
                    </template>
                </Placeholder>
            </div>
            <ul
                v-else
                class="w-full flex flex-col gap-4 lg:gap-6"
            >
                <CartItem
                    v-for="(item, index) in cart?.items"
                    :key="index"
                    :data="item"
                />
            </ul>
        </div>
    </div>
</template>

<style scoped></style>
