<template>
  <v-dialog
    v-model="internalDialog"
    :max-width="mobile ? undefined : maxWidth"
    :fullscreen="mobile"
    :persistent="persistent"
    scrollable
  >
    <HeaderActionsCard>
      <template #header>
        <div
          class="d-flex align-start ga-2 w-100"
          :class="{ 'pl-4': mobile, 'pt-2': mobile }"
          style="white-space: normal"
        >
          <slot name="title">
            <h3
              class="text-h5 py-2 flex-grow-1 text-break"
              style="min-width: 0; overflow-wrap: anywhere; white-space: normal"
            >
              <v-icon
                v-if="titleIcon"
                class="mr-2"
                >{{ titleIcon }}</v-icon
              >
              {{ title }}
            </h3>
          </slot>
          <v-btn
            v-if="!hideClose"
            icon="mdi-close"
            :variant="mobile ? 'tonal' : 'text'"
            density="comfortable"
            class="flex-shrink-0"
            @click="close"
          />
        </div>
      </template>

      <slot />
    </HeaderActionsCard>
  </v-dialog>
</template>

<script setup lang="ts">
import { computed } from "vue"
import { useDisplay } from "vuetify"

import HeaderActionsCard from "@/components/shared/cards/HeaderActionsCard.vue"

const props = withDefaults(
  defineProps<{
    modelValue: boolean
    title?: string
    titleIcon?: string
    maxWidth?: number | string
    persistent?: boolean
    hideClose?: boolean
  }>(),
  {
    title: "",
    titleIcon: "",
    maxWidth: 700,
    persistent: false,
    hideClose: false,
  }
)

const emit = defineEmits<{
  "update:modelValue": [value: boolean]
}>()

const { mobile } = useDisplay()

const internalDialog = computed({
  get: () => props.modelValue,
  set: (value) => emit("update:modelValue", value),
})

function close() {
  internalDialog.value = false
}
</script>
