<script setup lang="js">
import { ref } from 'vue'
import axios from 'axios'
import { useToast } from 'vue-toast-notification'

const toast = useToast({
  position: 'top-right'
})

const brandName = ref('')

const submit = async (e) => {
  e.preventDefault()
  try {
    const res = await axios.post('/brand', {
      name: brandName._value
    })
    toast.success('Successfully added a new brand.')
    brandName.value = ''
    // TODO: refresh items list
  } catch (err) {
    toast.error('An unhandled exception occoured. Please check logs')
    console.error(err)
  }
}
</script>

<template>
  <form class="d-flex align-items-center justify-content-center m-3" v-on:submit="submit">
    <div class="form-floating">
      <input
        id="brand-name-input"
        type="text"
        class="form-control"
        placeholder=""
        v-model="brandName"
      />
      <label for="brand-name-input">New Brand Name</label>
    </div>

    <div class="form-floating m-3">
      <input type="submit" value="Add New Brand" class="btn btn-primary" />
    </div>
  </form>
</template>
