<template>
  <v-dialog
    :max-width="isMaximized ? screenWidth : 1024"
    :max-height="'calc(100vh - 48px)'"
    class="default-modal tw:transition-all"
    contained
  >
    <template #default="{ isActive }">
      <v-card>
        <div class="tw:flex tw:h-[calc(100vh-48px)] tw:flex-col">
          <!-- header -->
          <div
            v-show="!hideHeader"
            class="tw:flex tw:max-w-full tw:px-4 tw:py-2"
          >
            <div class="tw:truncate">
              <slot name="modal-actions-prepend" />
            </div>
            <slot name="modal-header-inner" />
            <div class="tw:ml-auto tw:shrink-0">
              <slot name="modal-additional-actions" />
              <!-- maximize button -->
              <v-btn
                variant="text"
                dense
                :icon="
                  !isMaximized ? 'mdi-window-maximize' : 'mdi-window-restore'
                "
                size="small"
                @click="setMaximized(!isMaximized)"
              />
              <!-- close button -->
              <v-btn
                variant="text"
                dense
                icon="mdi-close"
                size="small"
                @click="isActive.value = false"
              />
            </div>
          </div>

          <!-- content -->
          <div id="modalContent" class="tw:max-h-full tw:grow tw:overflow-auto">
            <slot />
          </div>
          <div v-if="$slots['modal-footer']">
            <slot name="modal-footer" />
          </div>
        </div>
      </v-card>
    </template>
  </v-dialog>
</template>

<script setup lang="ts">
import { useWindowSize } from "@vueuse/core"
import { ref } from "vue"

defineProps<{ hideHeader?: boolean }>()

const { width: screenWidth } = useWindowSize()

const isMaximized = ref(false)

const setMaximized = (value: boolean) => (isMaximized.value = value)

defineExpose({ setMaximized })
</script>

<style>
/* ensure that the modal is always placed at top */
@reference "@raclettejs/core/orchestrator/assets/styles/tailwindStyles.css";

.default-modal {
  .v-overlay__content {
    @apply tw:top-0;
    @apply tw:transition-all;
  }
}
</style>
