<script setup lang="ts">
import party from 'party-js'

const props = defineProps<{
  userDeadlineId: number
}>()

const emit = defineEmits(['update'])

const isOpen = ref(false)

const { refresh: onConfirmDeadline, status } = useFetch<any>(() => `user-deadlines/${props.userDeadlineId}`, {
  method: 'PUT',
  immediate: false,
  watch: false,
  async onResponse({ response }) {
    if (response.ok) {
      useToast().add({
        icon: 'i-heroicons-check-circle-20-solid',
        title: 'Deadline erfolgreich Abgeschlossen.',
        color: 'emerald',
      })
      emit('update')
      isOpen.value = false
    }
  },
})

function confirmDeadline(event) {
  party.confetti(event)
  onConfirmDeadline()
}
</script>

<template>
  <UButton class="transition-150 transform-gpu hover:scale-110" icon="i-heroicons-book-open" size="sm" variant="solid" color="primary" square @click="isOpen = true" />
  <UDashboardModal
    v-model="isOpen"
    title="Deadline abschließen"
    description="Bist du dir sicher das du die Deadline abschließen möchtest?"
    icon="i-heroicons-book-open"
    :ui="{
      icon: { base: 'text-primary dark:text-primary-400' } as any,
      footer: { base: 'ml-16' } as any,
    }"
  >
    <template #footer>
      <UButton color="primary" label="Abschließen" :loading="status === 'pending'" @click="confirmDeadline" />
      <UButton color="white" label="Abbrechen" @click="isOpen = false" />
    </template>
  </UDashboardModal>
</template>
