<script setup>
import { ref, reactive, computed } from 'vue'
import { postBook, extractFormErrorFromField } from './api.js'
import { useRouter } from 'vue-router'
import CoverUpload from './CoverUpload.vue'

const router = useRouter()

const book = ref({
  title: '',
  author: '',
  coverId: null,
})
const errors = ref(null)
const titleError = computed(() => {
  return extractFormErrorFromField('Title', errors.value)
})
const authorError = computed(() => {
  return extractFormErrorFromField('Author', errors.value)
})

function onSubmit(e) {
  postBook(book).then((res) => {
    if (res.ok) {
      router.push('/')
      return
    } else {
      res.json().then((json) => (errors.value = json))
    }
  })
}
</script>

<template>
  <form @submit.prevent="onSubmit">
    <div class="field">
      <label class="label">{{ $t('addbook.title') }}</label>
      <div class="control">
        <input
          :class="'input ' + (titleError ? 'is-danger' : '')"
          type="text"
          maxlength="300"
          required
          v-model="book.title"
          :placeholder="$t('addbook.title')"
        />
      </div>
      <p v-if="titleError" class="help is-danger">{{ titleError }}</p>
    </div>
    <div class="field">
      <label class="label">{{ $t('addbook.author') }}</label>
      <div class="control">
        <input
          :class="'input ' + (authorError ? 'is-danger' : '')"
          type="text"
          maxlength="100"
          v-model="book.author"
          :placeholder="$t('addbook.author')"
        />
      </div>
      <p v-if="authorError" class="help is-danger">{{ authorError }}</p>
    </div>
    <CoverUpload name="cover" @on-image-upload="(id) => (book.coverId = id)" />
    <div class="field">
      <div class="control">
        <button class="button is-link">{{ $t('addbook.submit') }}</button>
      </div>
    </div>
  </form>
</template>

<style scoped></style>
