<script setup lang="ts">
import {
  DialogContent as ShadcnDialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/core/dialog';
import { UiButton } from '@/components/UiButton';
import { UiIcon } from '@/components/UiIcon';
import UiDialogClose from './UiDialogClose.vue';
import type { DialogContentEmits } from 'reka-ui';
import { computed, mergeProps, toValue, useAttrs, useSlots } from 'vue';
import { reactiveOmit } from '@vueuse/core';
import { useForwardPropsEmits } from 'reka-ui';
import { cn } from '@/lib/utils';
import type { UiDialogContentProps } from './types';

defineOptions({
  name: 'UiDialogContent',
  inheritAttrs: false,
});

const props = withDefaults(defineProps<UiDialogContentProps>(), {
  ariaTitle: 'Dialog',
  ariaLabelCloseDialog: 'Close dialog',
  maxWidth: 'max-w-[50vw]',
  showCloseButton: true,
});

const emit = defineEmits<DialogContentEmits>();
const attrs = useAttrs();
const slots = useSlots();

const delegatedProps = reactiveOmit(
  props,
  'title',
  'description',
  'ariaTitle',
  'ariaLabelCloseDialog',
  'maxWidth',
  'showCloseButton',
);
const forwarded = useForwardPropsEmits(delegatedProps, emit);

/** Align with other Ui* wrappers: merge forwarded reka props with fallthrough attrs. */
const rootBindings = computed(() => mergeProps(toValue(forwarded), attrs));

const showHeaderSlot = computed(() => typeof slots.header === 'function');
const showTitleBlock = computed(
  () => props.title !== undefined && props.title !== '',
);
const showDescription = computed(
  () => props.description !== undefined && props.description !== '',
);
const showActions = computed(() => typeof slots.actions === 'function');
const showBuiltInHeaderChrome = computed(
  () =>
    !showHeaderSlot.value && (showTitleBlock.value || showDescription.value),
);
</script>

<template>
  <ShadcnDialogContent
    v-bind="rootBindings"
    :max-width="maxWidth"
    :class="cn('gap-4')"
  >
    <template v-if="showHeaderSlot">
      <slot name="header" />
    </template>
    <template v-else-if="showBuiltInHeaderChrome">
      <div class="flex items-start justify-between gap-4">
        <DialogHeader class="min-w-0 flex-1 gap-2 text-left">
          <DialogTitle v-if="showTitleBlock">{{ title }}</DialogTitle>
          <DialogTitle v-else class="sr-only">{{ ariaTitle }}</DialogTitle>
          <DialogDescription v-if="showDescription">{{
            description
          }}</DialogDescription>
        </DialogHeader>
        <UiDialogClose v-if="showCloseButton" as-child>
          <UiButton
            type="button"
            variant="ghost"
            class="size-9 shrink-0 p-0"
            :aria-label="ariaLabelCloseDialog"
          >
            <UiIcon name="x" :size="20" aria-hidden="true" />
          </UiButton>
        </UiDialogClose>
      </div>
    </template>
    <template v-else>
      <div class="flex items-start justify-between gap-4">
        <DialogTitle class="sr-only">{{ ariaTitle }}</DialogTitle>
        <UiDialogClose v-if="showCloseButton" as-child>
          <UiButton
            type="button"
            variant="ghost"
            class="ms-auto size-9 shrink-0 p-0"
            :aria-label="ariaLabelCloseDialog"
          >
            <UiIcon name="x" :size="20" aria-hidden="true" />
          </UiButton>
        </UiDialogClose>
      </div>
    </template>

    <div class="flex min-h-0 flex-1 flex-col">
      <slot />
    </div>

    <DialogFooter v-if="showActions">
      <slot name="actions" />
    </DialogFooter>
  </ShadcnDialogContent>
</template>
