<template>
  <dialog class="dialog" ref="dialog" @close="onClose" @keydown.esc="onCancel">
    <div class="dialog-main">
      <slot></slot>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac ante mollis, fermentum nunc nec, ultricies nunc. Donec
    </div>
    <div class="dialog-aside">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac ante mollis, fermentum nunc nec, ultricies nunc. Donec
    </div>
  </dialog>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'

const dialog = ref<HTMLDialogElement>();
const popover = ref<HTMLDivElement>();
const props = defineProps<{
  open: boolean,
  preventClose: boolean,
}>();

const emit = defineEmits<{
  'update:open': [boolean]
}>();

function onCancel(event: Event) {
  if (props.preventClose) {
    event.preventDefault();
  }
}

function onClose() {
  emit('update:open', false);
}

watch(() => props.open, (open) => {
  if (open) {
    console.log(dialog.value);
    dialog.value?.showModal();
    popover.value?.showPopover();
  } else {
    dialog.value?.close();
  }
}, {immediate: true});

</script>
<style>
.dialog[open] {
  display: grid;
  max-width: 800px;
  grid-template-columns: 2fr 1fr;
  gap: 4rem;
  background: none;
  border: none;
  pointer-events: visible;  
}

.dialog[open]::backdrop {
  background: rgba(from red r g b / 0.5);
  backdrop-filter: blur(20px);
}

.dialog-main, .dialog-aside {
  padding: 1rem;
  background: white;
  border: 5px solid black;
  outline: none;
}
</style>