<template>
  <UModal :open="isOpen" :title="$t('applicationForms.deleteTitle')" @update:open="$emit('update:isOpen', $event)">
    <template #body>
      {{ $t('applicationForms.deleteConfirm', { name: applicationFormToDelete.name }) }}
    </template>
    <template #footer>
      <UButton :label="$t('common.cancel')" color="neutral" variant="outline" @click="$emit('update:isOpen', false)" />
      <UButton :label="$t('common.delete')" color="neutral" :disabled="!applicationFormToDelete.id" @click="onDelete" />
    </template>
  </UModal>
</template>

<script setup lang="ts">
import type { ApplicationFormDto } from '~~/.api-client'

const emit = defineEmits<{
  (e: 'delete', id: string): void
  (e: 'update:isOpen', value: boolean): void
}>()

const props = defineProps<{
  applicationFormToDelete: ApplicationFormDto
  isOpen: boolean
}>()

function onDelete() {
  if (!props.applicationFormToDelete.id) {
    return
  }
  emit('delete', props.applicationFormToDelete.id)
}
</script>
