<template>
  <div
    id="page-card"
    class="w100 flex column glass-card top-rounded-card no-scroll no-wrap"
    >
    <div
      id="card-body-header"
      style="flex-shrink: 0; min-height: var(--top-raduis);"
      >
      <q-resize-observer @resize="onHeaderResize"/>
      <slot name="card-body-header"/>
    </div>
    <div id="card-body" >
      <q-resize-observer @resize="onBodyResize"/>
      <pn-shadow-scroll :hideShadows="isResizing" :height="scrollAreaHeight">
        <slot/>
      </pn-shadow-scroll>
    </div>
  </div>
</template>

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

const heightCard = ref(100)
const scrollAreaHeight = ref(100)
const headerHeight = ref(0)

interface sizeParams {
  height: number,
  width: number
}

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

async function onBodyResize(size: sizeParams) {
  heightCard.value = size.height
  await updateScrollAreaHeight()
}

async function updateScrollAreaHeight() {
  await nextTick(() => {
    scrollAreaHeight.value = Math.max(0, heightCard.value)
  })
}

watch(heightCard, updateScrollAreaHeight)
watch(headerHeight, updateScrollAreaHeight)

const isResizing = ref(false)
let resizeTimer: ReturnType<typeof setTimeout> | null = null

watch(heightCard, () => {
  isResizing.value = true
  
  if (resizeTimer) {
    clearTimeout(resizeTimer)
    resizeTimer = null
  }
  
  resizeTimer = setTimeout(() => {
    isResizing.value = false
    resizeTimer = null
  }, 150)
})

</script>

<style scoped>
  .glass-card {
    opacity: 1 !important;
    background-color: white;
  }

  #page-card {
    flex: 1 0 auto;
    min-height: 0;
    overflow: hidden;
  }
  
  #card-body {
    overflow: hidden;
    flex: 1 1 0;
    min-height: 0;
    position: relative;
  }

  #card-body :deep(.q-scrollarea__content) {
    width: 100% !important;
  }
</style>
