<script setup lang="ts">
const isOpen = useMobileMenuOpen()

const props = defineProps<{
  class?: string
  ux?: any
  fullHeight?: boolean
  gridMenuProps?: any
  modalProps?: any
  vertical: 'fill' | 'top' | 'center' | 'bottom'
  horizontal: 'fill' | 'left' | 'center' | 'right'
}>()

const classes = useStyling(
  'scaffoldMenuModal',
  {
    slots: {
      wrapper: 'relative w-full h-full flex flex-row',
      overlay: 'absolute',
      content:
        'relative ring-0 rounded-none translate-x-0 translate-y-0 w-auto min-w-0 max-w-none h-auto min-h-0 max-h-none sm:max-h-none top-auto bottom-auto left-auto right-auto',
    },
    variants: {
      vertical: {
        fill: {
          wrapper: 'items-stretch',
        },
        top: {
          wrapper: 'items-start',
        },
        center: {
          wrapper: 'items-center',
        },
        bottom: {
          wrapper: 'items-end',
        },
      },
      horizontal: {
        fill: {
          content: 'grow',
        },
        left: {
          wrapper: 'justify-start',
        },
        center: {
          wrapper: 'justify-center',
        },
        right: {
          wrapper: 'justify-end',
        },
      },
    },
  },
  props
)
</script>

<template>
  <XScaffoldGridMenu
    :fill="true"
    :overlap="props.fullHeight"
    position="above"
    v-bind="props.gridMenuProps"
  >
    <div :class="classes.wrapper">
      <UModal
        v-model:open="isOpen"
        :portal="false"
        :ui="{ overlay: classes.overlay, content: classes.content }"
        v-bind="props.modalProps"
      >
        <template #content>
          <slot />
        </template>
      </UModal>
    </div>
  </XScaffoldGridMenu>
</template>
