<template>
  <div id="card-body" class="w100 col-grow flex column" style="position: relative">
    <div
      class="glass-card fit top-rounded-card flex column"
      style="position: absolute; top: 0; left: 0"
    />
    <div
      id="card-body-header"
      style="min-height: var(--top-raduis);"
      >
      <slot name="card-body-header"/>
    </div>
    <div class="fit flex column col-grow">
      <q-resize-observer @resize="onResize" />
      <div id="card-scroll-area" class="noscroll">
        
        <q-scroll-area
          ref="scrollArea"
          :style="{height: heightCard+'px'}"
          class="w100 q-pa-none q-ma-none"
          id="scroll-area"
          @scroll="onScroll"
          :class="{ 
            'shadow-top': hasScrolled,
            'shadow-bottom': hasScrolledBottom 
          }"
          >
          <slot/>
          <div class="q-pa-sm"/>
        </q-scroll-area>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import type { QScrollArea } from 'quasar'
  const heightCard = ref(100)
  const hasScrolled = ref(false)
  const hasScrolledBottom = ref(false)

  interface sizeParams {
    height: number,
    width: number
  }

  interface ScrollInfo {
    verticalPosition: number;
    verticalPercentage: number;
    verticalSize: number;
    verticalContainerSize: number;
    horizontalPosition: number;
    horizontalPercentage: number;
  }

const scrollArea = ref<InstanceType<typeof QScrollArea> | null>(null)

  function onResize (size :sizeParams) {
    heightCard.value = size.height
  }

  function onScroll (info: ScrollInfo) {
    hasScrolled.value = info.verticalPosition > 0
    const scrollEnd = info.verticalPosition + info.verticalContainerSize >= info.verticalSize - 1
    hasScrolledBottom.value = !scrollEnd
  }

</script>

<style>
  #scroll-area div > .q-scrollarea__content {
    width: 100% !important;
  }
</style>

<style scoped>
  .q-scrollarea {
    position: relative;
    transform: translateY(0);
  }

  .q-scrollarea::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: linear-gradient(to bottom, 
      rgba(0,0,0,0.12) 0%, 
      rgba(0,0,0,0.08) 50%,
      transparent 100%
    );
    pointer-events: none;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    transform: translateY(-8px);
    will-change: opacity, transform;
    z-index: 1;
  }

  .q-scrollarea::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: linear-gradient(to top, 
      rgba(0,0,0,0.12) 0%, 
      rgba(0,0,0,0.08) 50%,
      transparent 100%
    );
    pointer-events: none;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    transform: translateY(8px);
    will-change: opacity, transform;
    z-index: 1;
  }

  .q-scrollarea.shadow-top::before {
    opacity: 1;
    transform: translateY(0);
  }

  .q-scrollarea.shadow-bottom::after {
    opacity: 1;
    transform: translateY(0);
  }
</style>