<script setup lang="ts">
const props = defineProps<{
  class?: string
  ux?: any
  fill?: boolean
  overlap?: boolean
  position: 'above' | 'below'
}>()

let observer: ResizeObserver | null = null

function updateHeaderHeight() {
  const header = document.getElementById('scaffold-header')
  const height = header?.getBoundingClientRect().height ?? 0

  document.documentElement.style.setProperty('--scaffold-header-height', `${height}px`)
}

onMounted(() => {
  updateHeaderHeight()

  observer = new ResizeObserver(() => updateHeaderHeight())
  window.addEventListener('resize', updateHeaderHeight)
})

onBeforeUnmount(() => {
  if (observer) observer.disconnect()
  window.removeEventListener('resize', updateHeaderHeight)
})

const classes = useStyling(
  'scaffoldGridMenu',
  {
    slots: {
      base: 'fixed w-[100vw] grid grid-rows-[var(--scaffold-header-height)_1fr] grid-cols-1 pointer-events-none',
      content: 'col-span-full',
    },
    variants: {
      fill: {
        true: {
          base: 'h-[100vh]',
        },
        false: {},
      },
      overlap: {
        true: {
          content: 'row-span-full',
        },
        false: {
          content: 'row-2',
        },
      },
      position: {
        above: {
          base: 'z-175',
          content: 'z-200',
        },
        below: {
          base: 'z-100',
          content: 'z-125',
        },
      },
    },
  },
  props
)
</script>

<template>
  <div :class="classes.base">
    <div :class="classes.content">
      <slot />
    </div>
  </div>
</template>
