<template>
  <q-item
    @click="showDialog=true"
    clickable
    v-ripple
    >
    <q-item-section avatar>
      <q-avatar 
        rounded 
        text-color="white" 
        :icon 
        :color="iconColor"
        size="lg"
      />
    </q-item-section>
    <q-item-section>
      <q-item-label>
        {{ $t(title) }}
      </q-item-label>
      <q-item-label caption>
        <slot name="value"/>
      </q-item-label>
    </q-item-section>
    <q-item-section side>
      <q-icon name="mdi-chevron-right" color="grey"/>
    </q-item-section>
  </q-item>

  <q-dialog
    v-model="showDialog"
    maximized
    transition-show="slide-up"
    transition-hide="slide-down"
    position="bottom"
    >
    <q-card
      class="fix-card-width flex column no-scroll no-wrap q-px-none"
      style="
        border-top-left-radius: var(--top-raduis) !important;
        border-top-right-radius: var(--top-raduis) !important;
      "
      >
        <div
          ref="cardHeaderRef"
          class="flex items-center no-wrap justify-between w100 q-my-none q-pa-md"
          >
          <div>
            <div class="flex column q-mx-xs">
              <span class="text-h6 ellipsis">{{ $t(title) }}</span>
              <span v-if="caption" class="text-grey text-caption">{{ $t(caption) }}</span>
            </div>
          </div>
          <div class="flex items-center justify-between no-wrap">
            <q-btn
              icon="mdi-close"
              @click="showDialog=false"
              flat round
            />
          </div>
        </div>
        <div 
          ref="cardBodyRef"
          class="q-px-none q-ma-none"
          >
          <pn-shadow-scroll
            :hideShadows="false"
            :height="bodyHeight"
            >
            <div ref="cardBodyInnerRef" class="q-px-md q-ma-none">
              <q-resize-observer @resize="updateDimensions" />
              <slot/>
            </div>
          </pn-shadow-scroll>
        </div>
        <div
          ref="cardFooterRef"
          class="q-pa-md"
          >
          <slot name="footer"/>
        </div>
    </q-card>
  
  </q-dialog>
</template>

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

  defineProps<{
    title: string
    caption?: string 
    icon: string
    iconColor: string
  }>()

  const showDialog=ref<boolean>(false)

  const slots = useSlots()
  const cardHeaderRef = ref<HTMLElement | null>(null)
  const cardFooterRef = ref<HTMLElement | null>(null)
  const cardBodyRef = ref<HTMLElement | null>(null)
  const cardBodyInnerRef = ref<HTMLElement | null>(null)

  const headerHeight = ref(0)
  const footerHeight = ref(0)
  const bodyInnerHeight = ref(0)
  const bodyHeight = ref(0)

  const updateDimensions = () => {
    headerHeight.value = cardHeaderRef.value?.offsetHeight || 0
    footerHeight.value = cardFooterRef.value?.offsetHeight || 0
    bodyInnerHeight.value = cardBodyInnerRef.value?.offsetHeight || 0
    bodyHeight.value = window.innerHeight - headerHeight.value - footerHeight.value - 48
  }

  watch(() => slots.body?.(), updateDimensions, { flush: 'post' })

</script>

<style scoped>
  .fix-card-width {
    width: var(--body-width) !important;
  }
</style>
