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

import useGetAllAddress from "~/composables/api/account/useGetAllAddress";

// meta

useSeoMeta({
    title : "پنل کاربری آدرس ها"
});

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

// state

const selectedAddress = ref<Address | null>();

const modalIsShow = ref(false);

// queries

const { data: addresses, isLoading: addressesIsLoading } = useGetAllAddress();

// methods

const handleSelectAddress = (address: Address) => {
    selectedAddress.value = { ...address };
};
</script>

<template>
    <div class="w-full flex flex-col gap-5">
        <ProfilePageTitle title="آدرس های شما" icon="ci:bi-map" />

        <ProfileSection title="همه">
            <template #button>
                <AddressModal
                    :address="undefined"
                    v-model:is-show="modalIsShow"
                />
            </template>
            <ul
                v-if="addressesIsLoading"
                class="w-full grid grid-cols-1 lg:grid-cols-2 gap-5"
            >
                <Skeleton
                    v-for="i in 6"
                    :key="i"
                    class="w-full !h-[10rem] !rounded-xl"
                />
            </ul>

            <div v-else class="w-full h-max">
                <div v-if="!addresses?.length" class="flex flex-grow w-full">
                    <Placeholder
                        title="آدرسی یافت نشد :("
                        icon="ci:bi-map"
                        class="!py-[4rem] !border-none"
                    />
                </div>

                <ul v-else class="w-full grid grid-cols-1 lg:grid-cols-2 gap-5">
                    <AddressItem
                        v-for="(address, index) in addresses"
                        :key="index"
                        :address="address"
                        @select="handleSelectAddress"
                        :selectable="false"
                        :isSelected="address.id == selectedAddress?.id"
                    />
                </ul>
            </div>
        </ProfileSection>
    </div>
</template>

<style scoped></style>
