<script setup lang="ts">
import { XIcon } from '@lucide/vue'
import type { HTMLAttributes } from 'vue'
import { inject, ref, watch } from 'vue'
import { useScrollLock } from '@vueuse/core'
import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/button'
import { useFocusTrap } from '@/lib/use-focus-trap'
import { useDismissableLayer } from '@/lib/use-dismissable-layer'
import { DialogContextKey } from './context'
import DialogOverlay from './DialogOverlay.vue'
import DialogClose from './DialogClose.vue'

defineOptions({ inheritAttrs: false })

const props = withDefaults(
  defineProps<{ class?: HTMLAttributes['class'], showCloseButton?: boolean }>(),
  { showCloseButton: true },
)

const context = inject(DialogContextKey)!
const contentRef = ref<HTMLElement | null>(null)

useFocusTrap(contentRef, context.open)
useDismissableLayer(contentRef, context.open, {
  onDismiss: () => { context.open.value = false },
})

const isLocked = useScrollLock(document.body)
watch(context.open, (value) => { isLocked.value = value }, { immediate: true })
</script>

<template>
  <Teleport to="body">
    <DialogOverlay />
    <Transition
      enter-active-class="animate-in fade-in-0 zoom-in-95 animation-duration-100"
      leave-active-class="animate-out fade-out-0 zoom-out-95 animation-duration-100"
    >
      <div
        v-if="context.open.value"
        ref="contentRef"
        data-slot="dialog-content"
        role="dialog"
        aria-modal="true"
        :aria-labelledby="context.titleId"
        :aria-describedby="context.descriptionId"
        tabindex="-1"
        v-bind="$attrs"
        :class="cn('bg-popover text-popover-foreground border border-border grid max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-sm shadow-lg sm:max-w-sm fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none', props.class)"
      >
        <slot />

        <DialogClose v-if="showCloseButton" as-child>
          <Button variant="secondary" class="absolute top-2 right-2 size-7 bg-transparent text-foreground hover:bg-black/10" size="icon">
            <XIcon class="size-3.5" />
            <span class="sr-only">Close</span>
          </Button>
        </DialogClose>
      </div>
    </Transition>
  </Teleport>
</template>
