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

import useDeleteAddress from "~/composables/api/account/useDeleteAddress";
import { useToast } from "~/composables/global/useToast";
import { QUERY_KEYS } from "~/constants";

// types

type Props = {
    address?: Address;
    isSelected?: boolean;
};

// props

defineProps<Props>();

// emit

const emit = defineEmits(["select"]);

// state

const { $queryClient: queryClient } = useNuxtApp();

const { addToast } = useToast();

// queries

const { mutateAsync: deleteAddress, isPending: deleteAddressIsPending } =
    useDeleteAddress();

// methods

const handleDeleteAddress = (id: number) => {
    deleteAddress(
        { id },
        {
            onSuccess: () => {
                queryClient.invalidateQueries({
                    queryKey: [QUERY_KEYS.addresses],
                });
                addToast({
                    message: "آدرس با موفقیت حذف شد",
                    options: {
                        status: "success",
                    },
                });
            },
            onError: () => {
                addToast({
                    message: "مشکلی در حذف آدرس رخ داد",
                    options: {
                        status: "error",
                    },
                });
            },
        }
    );
};
</script>

<template>
    <button
        @click.prevent="!!address ? emit('select', address) : null"
        :class="
            isSelected
                ? 'border-slate-200 ring-2 ring-offset-2 ring-black'
                : 'border-slate-200'
        "
        class="flex flex-col items-center transition-all relative cursor-pointer w-full group gap-4 p-4 border rounded-xl bg-slate-50 overflow-hidden"
    >
        <div v-if="deleteAddressIsPending" class="absolute inset-0">
            <Skeleton class="!size-full !rounded-xl" />
        </div>
        <span class="flex items-center justify-between w-full gap-3">
            <div
                class="flex items-center gap-3 lg:text-[1.125rem] font-semibold text-slate-900"
            >
                {{ !!address ? address.name : "آدرس" }}
                <span
                    v-if="isSelected"
                    class="bg-black rounded-xl px-3 py-2 text-slate-200 text-xs"
                >
                    انتخاب شده
                </span>
            </div>

            <button
                v-if="!!address"
                @click.stop="handleDeleteAddress(address.id!)"
                class="size-8 bg-slate-200/50 rounded-sm flex-center me-2 opacity-0 group-hover:opacity-100 transition-opacity"
            >
                <Icon name="bi:trash" class="**:fill-red-500" />
            </button>
        </span>

        <div
            class="flex flex-col items-center justify-between w-full gap-4 lg:flex-row"
        >
            <span
                class="w-full text-start text-sm lg:text-[1rem] lg:w-9/12 text-slate-700"
            >
                {{
                    !!address
                        ? `ایران, ${address.province}, ${address.city}, ${address.address}, کدپستی ${address.postal_code}`
                        : "افزودن آدرس جدید"
                }}
            </span>

            <div class="flex items-center justify-end w-full lg:w-3/12">
                <AddressModal :address="address" />
            </div>
        </div>
    </button>
</template>

<style scoped></style>
