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

const props = defineProps<{
  row: {
    id: number
    book_name: string
    author: string
    description: string
    isbn: string
    pages: number
    cover_image?: string
    status: string
  }
}>()

const isOpen = ref(false)

const form = ref()

const state = reactive({
  book_name: props.row.book_name,
  author: props.row.author,
  description: props.row.description,
  isbn: props.row.isbn,
  pages: props.row.pages,
  cover_image: props.row.cover_image,
  status: props.row.status,
})

const bookRecommendationStore = useBookRecommendationStore()

const { refresh: onSubmit, status } = useFetch<any>(`book-recommendations/${props.row.id}`, {
  method: 'PUT',
  body: state,
  immediate: false,
  watch: false,
  async onResponse({ response }) {
    if (response?.status === 422) {
      form.value.setErrors(response._data?.errors)
    }
    else if (response.ok) {
      useToast().add({
        icon: 'i-heroicons-check-circle-20-solid',
        title: 'Buchempfehlung wurde erfolgreich aktualisiert.',
        color: 'emerald',
      })
      await bookRecommendationStore.fetchRecommendations()
      isOpen.value = false
    }
  },
})
</script>

<template>
  <div>
    <UButton icon="i-heroicons-pencil-square" size="sm" variant="solid" square @click="isOpen = true" />

    <UModal v-model="isOpen">
      <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
        <template #header>
          <div class="flex items-center justify-between">
            <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
              Bearbeiten
            </h3>
            <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isOpen = false" />
          </div>
        </template>

        <UForm ref="form" :state="state" class="space-y-4" @submit="onSubmit">
          <UFormGroup label="Name" name="book_name">
            <UInput v-model="state.book_name" />
          </UFormGroup>
          <UFormGroup label="Autor" name="author">
            <UInput v-model="state.author" />
          </UFormGroup>
          <UFormGroup label="Beschreibung" name="description">
            <UTextarea v-model="state.description" />
          </UFormGroup>
          <UFormGroup label="ISBN" name="isbn">
            <UInput v-model="state.isbn" />
          </UFormGroup>
          <UFormGroup label="Seiten" name="pages">
            <UInput v-model="state.pages" type="number" />
          </UFormGroup>
          <UFormGroup label="Status" name="status">
            <USelect v-model="state.status" :options="bookRecommendationStore.statusOptions" option-attribute="name" />
          </UFormGroup>
          <UButton size="md" type="submit" :loading="status === 'pending'">
            Speichern
          </UButton>
          <UButton size="md" class="mx-4" color="white" label="Abbrechen" @click="isOpen = false" />
        </UForm>
      </UCard>
    </UModal>
  </div>
</template>
