<script setup lang="tsx">
/** @jsxImportSource vue */
import { Icon } from "@iconify/vue"
import { AnimatePresence, MotionConfig, motion, useDomRef } from "motion-v"
import { onMounted, onUnmounted, ref, watch } from "vue"
const isOpen = ref(false)

const openDialog = () => {
    isOpen.value = true
}

const closeDialog = () => {
    isOpen.value = false
}

const dialogRef = ref<HTMLDialogElement | null>(null)
/**
 * Use the dialog element's imperative API to open and close the dialog
 * when the component mounts and unmounts. This enables exit animations
 * and maintains the dialog's natural accessibility behaviour.
 */
watch(dialogRef, (value) => {
    if (!dialogRef.value) return
    if (value) {
        dialogRef.value.showModal()
    }
})
watch(
    isOpen,
    (value) => {
        if (!value) {
            dialogRef.value?.close()
        }
    },
    {
        flush: "pre",
    }
)

/**
 * handle click outside the modal to close the dialog
 */
const modalRef = useDomRef()
const handleClickOutside = (event: MouseEvent) => {
    if (modalRef.value && checkClickOutside(event, modalRef.value)) {
        closeDialog()
    }
}
onMounted(() => {
    document.addEventListener("click", handleClickOutside)
})

onUnmounted(() => {
    document.removeEventListener("click", handleClickOutside)
})

const checkClickOutside = (event: MouseEvent, element: HTMLElement) => {
    const { top, left, width, height } = element.getBoundingClientRect()
    return (
        event.clientX < left ||
        event.clientX > left + width ||
        event.clientY < top ||
        event.clientY > top + height
    )
}
/**
 * ==============   Icons   ================
 */
function QuestionMarkIcon() {
    return (
        <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="#4ff0b7"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
        >
            <circle cx="12" cy="12" r="10" />
            <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
            <path d="M12 17h.01" />
        </svg>
    )
}
</script>

<template>
    <MotionConfig
        :transition="{ type: 'spring', visualDuration: 0.2, bounce: 0 }"
    >
        <!-- Wrap everything in AnimatePresence to ensure proper animation handling -->
        <!-- issue in vue: https://github.com/vuejs/core/issues/12826 -->
        <AnimatePresence>
            <motion.div
                layout-id="modal"
                id="modal-open"
                :style="{ borderRadius: 30 }"
            >
                <motion.button
                    class="openButton"
                    @click="openDialog"
                    :style="{ borderRadius: 50 }"
                    data-primary-action
                    layout-id="cta"
                    :while-press="{ scale: 0.95 }"
                >
                    <motion.span layout-id="cta-text">Receive</motion.span>
                </motion.button>
            </motion.div>
            <motion.div
                v-if="isOpen"
                class="overlay"
                :initial="{ opacity: 0 }"
                :animate="{ opacity: 1 }"
                :exit="{ opacity: 0 }"
                :transition="{ duration: 0.2, ease: 'linear' }"
            />
            <dialog
                @close="closeDialog"
                @cancel="
                    (e) => {
                        e.preventDefault()
                        closeDialog()
                    }
                "
                v-if="isOpen"
                :open="false"
                ref="dialogRef"
            >
                <motion.div
                    ref="modalRef"
                    class="modal"
                    layout-id="modal"
                    :variants="{
                        initial: {
                            opacity: 0,
                        },
                        animate: {
                            opacity: 1,
                        },
                        exit: {
                            opacity: 0,
                        },
                    }"
                    initial="initial"
                    animate="animate"
                    exit="exit"
                    :style="{ borderRadius: 30 }"
                >
                    <motion.div
                        layout
                        :variants="{
                            exit: {
                                y: 100,
                            },
                        }"
                    >
                        <h2 class="title h3">
                            <QuestionMarkIcon />
                            Confirm
                        </h2>
                        <p class="big">
                            Are you sure you want to receive a load of money?
                        </p>
                        <div class="controls">
                            <button
                                @click="closeDialog"
                                class="cancel"
                                :style="{ borderRadius: '50px' }"
                            >
                                Cancel
                            </button>
                            <motion.button
                                :layoutDependency="false"
                                layout-id="cta"
                                @click="closeDialog"
                                class="save"
                                :style="{ borderRadius: 50 }"
                            >
                                <motion.span layout-id="cta-text"
                                    >Receive</motion.span
                                >
                            </motion.button>
                        </div>
                        <button
                            class="closeButton"
                            aria-label="Close"
                            @click="closeDialog"
                        >
                            <Icon icon="mdi:close" />
                        </button>
                    </motion.div>
                </motion.div>
            </dialog>
        </AnimatePresence>
    </MotionConfig>
</template>

<style>
#sandbox > [data-v-app] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
}

#sandbox button {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
}

#sandbox button:focus-visible {
    outline-offset: 2px;
    outline: 2px solid #8df0cc;
}

#sandbox button span {
    display: inline-block;
}

#modal-open {
    width: 100%;
    max-width: 400px;
    display: flex;
    justify-content: center;
    position: relative;
    bottom: 20px;
}

.openButton,
.controls button {
    width: 100%;
    max-width: 300px;
    background-color: #8df0cc;
    color: #0f1115;
    font-size: 16px;
    padding: 10px 20px;
    border-radius: 10px;
}

.controls {
    padding-top: 20px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.controls button.cancel {
    background-color: var(--divider);
    color: #f5f5f5;
}

dialog {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
}

.modal {
    border: 1px solid #1d2628;
    background-color: #0b1011;
    width: 100%;
    max-width: 400px;
    position: relative;
    bottom: 20px;
    overflow: clip;
    display: flex;
    align-items: flex-start;
}

.modal > div {
    padding: 20px;
    position: relative;
    height: fit-content;
    flex: 1;
}

.modal p {
    margin: 0;
}

.dialog::backdrop {
    display: none;
}

.title {
    margin: 0 0 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.closeButton {
    position: absolute;
    top: 20px;
    right: 20px;
}

.overlay {
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    inset: 0;
    z-index: 9999999;
    backdrop-filter: blur(3px);
}
</style>