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

import { useAuth } from "~/composables/api/auth/useAuth";
import useSignOut from "~/composables/api/auth/useSignOut";
import { useToast } from "~/composables/global/useToast";

// state

const { refreshToken, logout } = useAuth();
const { addToast } = useToast();

const isShow = ref(false);

// queries

const { mutateAsync: signout, isPending: signoutIsPending } = useSignOut();

// methods

const handleSubmit = () => {
    signout(
        { refresh_token: refreshToken.value! },
        {
            onSuccess: () => {
                addToast({
                    message: "با موفقیت از حساب خارج شدید",
                });
                logout(true);
            },
            onError: () => {
                addToast({
                    message: "خطایی در خروج از حساب رخ داد",
                });
                isShow.value = false;
            },
        }
    );
};
</script>

<template>
    <Modal
        v-model="isShow"
        title="خروج از حساب"
        icon="ci:bi-arrow-bar-right"
        contectClass="!w-[90vw] lg:!w-[35vw]"
        @close="isShow = false"
    >
        <template #trigger>
            <slot name="trigger" />
        </template>

        <template #content>
            <div class="w-full flex flex-col text-start gap-3 py-5" dir="rtl">
                <p class="leading-[175%] text-xs lg:text-sm">
                    با خارج شدن از حساب کاربری، دسترسی شما به برخی از امکانات
                    محدود خواهد شد. اگر قصد دارید دوباره وارد شوید، می‌توانید از
                    همان اطلاعات حساب خود استفاده کنید.
                </p>
                <p class="text-xs lg:text-sm">
                    ما همیشه منتظر بازگشت شما هستیم! 😊
                </p>
            </div>

            <div class="py-6 border-t border-slate-200 flex gap-3">
                <Button
                    @click="handleSubmit"
                    class="rounded-full px-5 lg:px-10"
                    size="md"
                >
                    <Icon
                        v-if="signoutIsPending"
                        name="ci:svg-spinners-3-dots-bounce"
                    />
                    <span v-else>آره دارم میرم</span>
                </Button>
                <DialogClose aria-label="Close">
                    <Button
                        variant="outlined"
                        class="rounded-full px-5 lg:px-10"
                        size="md"
                    >
                        نه فعلا هستم
                    </Button>
                </DialogClose>
            </div>
        </template>
    </Modal>
</template>

<style scoped></style>
