<script setup lang="ts">
import { useEventListener, useVModel } from '@vueuse/core';
import { watch } from 'vue';

interface Props {
    open: boolean;
}

interface Emit {
    (e: 'update:open', value: boolean): void;
}

const props = withDefaults(defineProps<Props>(), {
    open: false,
});
const emit = defineEmits<Emit>();

const isOpen = useVModel(props, 'open', emit, {passive: true});

watch(isOpen, value => {
    if (value) {
        document.body.classList.add('overflow-hidden');
    } else {
        document.body.classList.remove('overflow-hidden');
    }
});
useEventListener('keyup', e => {
    if (e.key === 'Escape') {
        isOpen.value = false;
    }
});
</script>

<template>
    <Transition name="fade">
        <template v-if="isOpen">
            <div class="fixed inset-0">
                <div class="absolute bg-black opacity-80 inset-0 z-0" />
                <div class="absolute grid inset-0">
                    <div class="justify-self-center m-auto">
                        <slot />
                    </div>
                </div>
            </div>
        </template>
    </Transition>
</template>

<style scoped lang="postcss">

.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 100ms ease-out;
}

</style>
