<script setup>
import { vOnClickOutside } from "@vueuse/components";
import { defineEmits, defineProps, onMounted, onUnmounted } from "vue";

const emit = defineEmits(["close-modal"]);
const props = defineProps({ title: String });

function close() {
    emit("close-modal");
}

function keyUpHandler(e) {
    if (e.key == "Escape") close();
}

onMounted(() => {
    window.addEventListener("keyup", keyUpHandler);
});

onUnmounted(() => {
    window.removeEventListener("keyup", keyUpHandler);
});
</script>

<template>
    <div class="modal-wrapper">
        <div class="modal" v-on-click-outside="close">
            <header class="modal-header">
                <h2>{{ props.title }}</h2>
                <div class="close-button" @click="close"></div>
            </header>

            <div class="modal-body">
                <slot name="body"> This is the default body! </slot>
            </div>
        </div>
    </div>
</template>

<style scoped>
.modal-wrapper {
    display: flex;
    align-items: center;
    position: fixed;
    height: 100%;
    width: 100%;
    justify-content: center;
    left: 0;
    top: 0;
    z-index: 4000;

    background-color: rgba(0, 0, 0, 0.8);
}

.modal {
    display: flex;
    flex-direction: column;
    border-radius: 5px;
    color: var(--primary-text);
    background-color: var(--secondary-background);
    padding: 20px;
}

.modal-header {
    margin-bottom: 10px;
}

h2 {
    display: inline-block;
    font-size: 2.4rem;
    margin: 0;
}

.close-button {
    background-color: var(--secondary-text);
    cursor: pointer;
    height: 18px;
    mask: url(../../assets/close.svg);
    mask-repeat: no-repeat;
    mask-size: cover;
    width: 18px;
    float: right;
    margin-top: 5px;
}
</style>
