<script setup lang="ts">
const dialogue = useTemplateRef('dialogue');
const searchForm = useTemplateRef('searchForm');

const open = () => {
    searchForm.value?.reset();
    dialogue.value?.showModal();
};

const close = () => {
    dialogue.value?.close();
};

const onMousedown = (event: MouseEvent) => {
    const rect = dialogue.value?.getBoundingClientRect();
    if (rect && (
        event.clientX < rect.left || event.clientX > rect.right ||
        event.clientY < rect.top || event.clientY > rect.bottom)
    ) {
        close();
    }
};

defineExpose({ open, close });
</script>

<template>
    <dialog ref="dialogue" class="container m-auto h-100 rounded border" @mousedown="onMousedown">
        <SearchForm ref="searchForm" @selected="close()" />
    </dialog>
</template>
