<script setup>
import { ref, computed } from 'vue'
import { postCollection, extractFormErrorFromField } from './api.js'

const emit = defineEmits(['created'])

const collection = ref({
  name: '',
})
const addingCollection = ref(false)
const errors = ref(null)
const error = computed(() => {
  return extractFormErrorFromField('Name', errors.value)
})
const vFocus = {
  mounted: (el) => el.focus(),
}

function onButtonClick() {
  if (addingCollection.value) {
    createCollection()
  } else {
    addingCollection.value = true
  }
}

function createCollection() {
  postCollection(collection.value).then((res) => {
    if (res.ok) {
      addingCollection.value = false
      collection.value.name = ''
      res.json().then((json) => emit('created', json.id))
    } else {
      res.json().then((json) => (errors.value = json))
    }
  })
}
</script>

<template>
  <div class="field has-addons">
    <div v-if="addingCollection" class="control">
      <input
        :class="'input is-medium ' + (error ? 'is-danger' : '')"
        v-focus
        @keyup.enter="createCollection()"
        type="text"
        maxlength="300"
        v-model="collection.name"
        :placeholder="$t('collections.name')"
      />
      <p v-if="error" class="help is-danger">{{ error }}</p>
    </div>
    <div class="control">
      <button @click="onButtonClick" class="button is-medium mb-2">
        <span class="icon" :title="$t('collections.add')">
          <b-icon-check v-if="addingCollection" />
          <b-icon-plus v-else />
        </span>
      </button>
    </div>
  </div>
</template>

<style scoped></style>
