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

import useDeleteCartAll from "~/composables/api/orders/useDeleteCartAll";
import { useToast } from "~/composables/global/useToast";
import { QUERY_KEYS } from "~/constants";

// state

const { $queryClient: queryClient } = useNuxtApp();
const router = useRouter();
const { addToast } = useToast();

const isShow = ref(false);

// queries

const { mutateAsync: deleteCartAll, isPending: deleteCartAllIsPending } =
    useDeleteCartAll();

// methods

const handleSubmit = () => {
    deleteCartAll(undefined, {
        onSuccess: () => {
            queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.cart] });
            isShow.value = false;
            addToast({
                message: "سبد با موفقیت حذف شد",
                options: {
                    status: "success",
                },
            });
        },
        onError: () => {
            addToast({
                message: "خطایی در حذف سبد رخ داد",
                options: {
                    status: "error",
                },
            });
        },
    });
};
</script>

<template>
    <Modal
        v-model="isShow"
        title="حذف اقلام"
        icon="ci:bi-trash"
        contectClass="!w-[90vw] lg:!w-[35vw]"
        @close="isShow = false"
    >
        <template #trigger>
            <Button
                class="rounded-full shrink-0 whitespace-pre"
                end-icon="ci:bi-trash"
                size="md"
            >
                حذف همه
            </Button>
        </template>

        <template #content>
            <div class="w-full flex flex-col text-start gap-3 py-5" dir="rtl">
                <p>آیا از حذف تمام محصولات از سبد خرید اطمینان دارید؟</p>
                <p>این فرایند غیر قابل بازگشت است</p>
            </div>

            <div class="py-6 border-t border-slate-200 flex gap-3">
                <Button
                    @click="handleSubmit"
                    class="rounded-full px-10"
                    size="md"
                >
                    <Icon
                        v-if="deleteCartAllIsPending"
                        name="svg-spinners:3-dots-bounce"
                    />
                    <span v-else>بله</span>
                </Button>
                <DialogClose aria-label="Close">
                    <Button
                        variant="outlined"
                        class="rounded-full px-10"
                        size="md"
                    >
                        انصراف
                    </Button>
                </DialogClose>
            </div>
        </template>
    </Modal>
</template>

<style scoped></style>
