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

type Props = {
    isShow: boolean;
};

// props

const props = defineProps<Props>();

const { isShow } = toRefs(props);

// computeds

const visible = computed({
    get: () => isShow.value,
    set: () => null,
});
</script>

<template>
    <DialogRoot v-model:open="visible">
        <DialogPortal>
            <DialogOverlay
                class="bg-black/50 backdrop-blur-sm data-[state=open]:animate-overlay-show fixed inset-0 z-999"
            />

            <div
                class="fixed inset-0 w-full h-svh z-9999 flex-center"
                v-if="visible"
            >
                <div class="overflow-y-auto max-h-svh absolute left-[50%] py-10 w-fit max-w-[50rem] translate-x-[-50%]">
                    <DialogContent
                        class="min-w-[30vw] max-w-[50vw] data-[state=open]:animate-content-show text-black font-iran-yekan-x focus:outline-none z-[100]"
                    >
                        <div class="w-full h-[350px] shrink-0 rounded-2xl relative overflow-hidden flex-center">
                            <div
                                class="bg-custom-conic size-[200%] absolute -top-1/2 -left-1/2 animate-spin [animation-duration:3s] z-[1]"
                            ></div>
                            <div
                                class="shrink-0 p-6 pt-20 z-[2] absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 w-[98.8%] h-[98.5%] flex flex-col gap-24 items-center bg-white border shadow-black/10 justify-center border-slate-300 rounded-xl"
                            >
                                <NuxtImg
                                    class="aspect-square w-[300px]"
                                    src="/img/heymlz/heymlz-payment-progress.gif"
                                    loading="lazy"
                                    fetch-priority="low"
                                />

                                <div class="-translate-y-28 flex-center gap-3">
                                    <Icon
                                        name="ci:svg-spinners-3-dots-bounce"
                                        size="20"
                                    />
                                    <span class="text-lg"> در حال انتقال به درگاه پرداخت </span>
                                </div>
                            </div>
                        </div>
                    </DialogContent>
                </div>
            </div>
        </DialogPortal>
    </DialogRoot>
</template>

<style scoped>
.bg-custom-conic {
    background-size: 100% 100%;
    background-position: 0px 0px, 0px 0px;
    background-image: radial-gradient(142% 91% at -6% 90%, #ff000000 1%, #ff000000 99%),
        conic-gradient(from 0deg at 50% 50%, var(--color-blue-500) 0%, #ff000000 34%);
}
</style>
