<template>
  <q-dialog v-model="modelValue">
    <q-card
      class="q-pa-none q-ma-none w100 no-scroll" 
      >
      <q-card-section class="row items-center q-pb-none">
        <div class="flex no-wrap items-center w100">
          <q-resize-observer @resize="onHeaderResize"/>
          <span class="text-bold">
            {{ $t(title)}}
          </span>
          <q-space />
          <q-btn icon="close" flat round dense v-close-popup />
        </div>
      </q-card-section>

      <div>
        <pn-shadow-scroll :height="scrollAreaHeight" :hideShadows="false">
          <div>
            <q-resize-observer @resize="onBodyResize"/>
            <slot/>
          </div>
        </pn-shadow-scroll>
      </div> 
    </q-card>
  </q-dialog>
</template>

<script setup lang="ts">
  import { ref, watch, nextTick } from 'vue'
  import pnShadowScroll from './pnShadowScroll.vue'

  defineProps<{
    title: string
  }>()

  const modelValue = defineModel<boolean>({
    required: true
  })

  const headerHeight = ref(0)
  const bodyHeight = ref(0)
  const scrollAreaHeight = ref(0)

  interface sizeParams {
    height: number,
    width: number
  }

  function onHeaderResize (size: sizeParams) {
    headerHeight.value = size.height
  }

  function onBodyResize (size: sizeParams) {
    bodyHeight.value = size.height
  }

  async function updateScrollAreaHeight () {
  await nextTick(() => {
    scrollAreaHeight.value = Math.min(
      bodyHeight.value + 16, 
      window.innerHeight - headerHeight.value - 64
    )
  })
}

watch(bodyHeight, updateScrollAreaHeight)
watch(headerHeight, updateScrollAreaHeight)

</script>

<style scoped>
</style>
