<template>
  <DefaultModal v-model="showModal">
    <div class="tw:p-5 tw:h-full" ref="appCompositionOverlay">
      <WidgetsLayoutLoader
        v-if="widgetsLayout"
        :widgets-layout="widgetsLayout"
        :slot-layout="slotLayout"
        slot-type="modal"
        :max-height="availableComponentHeight"
      />
    </div>
  </DefaultModal>
</template>

<script setup lang="ts">
import { DefaultModal, WidgetsLayoutLoader } from "@racletteOrchestrator"
import useCurrentComposition from "@racletteOrchestrator/composables/useCurrentComposition"
import { computed, useTemplateRef } from "vue"
import useRouteState from "@racletteOrchestrator/composables/useRouteState"
import { DEFAULT_MODAL_SLOT_NAME } from "@racletteOrchestrator/router/routeParserHelper"
const appCompositionOverlayRef = useTemplateRef("appCompositionOverlay")
const availableComponentHeight = computed(
  () => appCompositionOverlayRef?.value?.offsetHeight || 400,
)
const { widgetsLayout, slotLayout } = useCurrentComposition(
  DEFAULT_MODAL_SLOT_NAME,
)
const { removeSlot } = useRouteState()

const showModal = computed({
  get: () => !!widgetsLayout.value,
  set: () => removeSlot(DEFAULT_MODAL_SLOT_NAME),
})
</script>
