<script setup lang="ts">
import { useBookRecommendationStore } from '~/stores/book-recommendations'

const props = defineProps<{
  row: {
    id: number
    book_name: string
  }
}>()
const isOpen = ref(false)

const bookRecommendationStore = useBookRecommendationStore()

const { refresh: onDelete, status } = useFetch<any>(`book-recommendations/${props.row.id}`, {
  method: 'DELETE',
  immediate: false,
  watch: false,
  async onResponse({ response }) {
    if (response.ok) {
      useToast().add({
        icon: 'i-heroicons-check-circle-20-solid',
        title: 'Buchempfehlung wurde gelöscht.',
        color: 'emerald',
      })
      await bookRecommendationStore.fetchRecommendations()
    }

    isOpen.value = false
  },
})
</script>

<template>
  <UButton icon="i-heroicons-trash" size="sm" color="red" variant="solid" square @click="isOpen = true" />
  <UDashboardModal
    v-model="isOpen"
    title="Buch Empfehlung löschen"
    :description="`Möchtest du die Buchempfehlung ${row.book_name} wirklich löschen?`"
    icon="i-heroicons-exclamation-circle"
    :ui="{
      icon: { base: 'text-red-500 dark:text-red-400' } as any,
      footer: { base: 'ml-16' } as any,
    }"
  >
    <template #footer>
      <UButton color="red" label="Löschen" :loading="status === 'pending'" @click="onDelete" />
      <UButton color="white" label="Abbrechen" @click="isOpen = false" />
    </template>
  </UDashboardModal>
</template>
