<template>
  <div
    :ref="composedDialogRef"
    :class="[
      ns.b(),
      ns.is('fullscreen', fullscreen),
      ns.is('draggable', draggable),
      ns.is('align-center', alignCenter),
      { [ns.m('center')]: center },
      customClass,
    ]"
    :style="style"
    tabindex="-1"
  >
    <header ref="headerRef" :class="ns.e('header')">
      <slot name="header">
        <span role="heading" :class="ns.e('title')">
          {{ title }}
        </span>
      </slot>
      <button
        v-if="showClose"
        :class="ns.e('headerbtn')"
        type="button"
        @click="$emit('close')"
      >
        <kk-icon :class="ns.e('close')" type="close">
          <!-- <component :is="closeIcon" /> -->
        </kk-icon>
      </button>
    </header>
    <div :id="bodyId" :class="ns.e('body')">
      <slot />
    </div>
    <footer v-if="$slots.footer" :class="ns.e('footer')">
      <slot name="footer" />
    </footer>
  </div>
</template>

<script lang="ts" setup>
import { computed, inject } from 'vue'
import { KkIcon } from '@kankan-components/components/basic/icon'
import { FOCUS_TRAP_INJECTION_KEY } from '@kankan-components/components/basic/focus-trap'
import { useDraggable } from '@kankan-components/hooks'
import { composeRefs } from '@kankan-components/utils'
import { dialogInjectionKey } from '@kankan-components/tokens'
import { dialogContentEmits, dialogContentProps } from './dialog-content'

// const { t } = useLocale()
// const { Close } = CloseComponents

defineOptions({ name: 'UiDialogContent' })
const props = defineProps(dialogContentProps)
defineEmits(dialogContentEmits)

const { dialogRef, headerRef, bodyId, ns, style } = inject(dialogInjectionKey)!
const { focusTrapRef } = inject(FOCUS_TRAP_INJECTION_KEY)!

const composedDialogRef = composeRefs(focusTrapRef, dialogRef)

const draggable = computed(() => props.draggable)
useDraggable(dialogRef, headerRef, draggable)
</script>
