<script setup lang="ts">
import { ref, toRaw, onMounted } from 'vue'
import axios from 'axios'
import { useToast } from 'vue-toast-notification'
import InvoiceItem from "./../classes/invoice_item"

const props = defineProps(["invoice"])
const emit = defineEmits(["added"])

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

const gettingData = ref(true) // for when getting all item(s)
const submitting = ref(false) // shows spinner on add button
const allItems = ref([])

const item = ref(new InvoiceItem())
const itemSelection = ref(null)

const getAllItems = async () => {
  allItems.value = []
  gettingData.value = true

  try {
    const r = await axios.get('/item')
    if (r.status === 200) {
      allItems.value = r.data.data
    } else if (r.status === 204) {
      toast.warning('No items found')
    }
  } catch (err) {
    toast.error('An unhandled exception occoured. Please check logs')
    console.error(err)
  }

  gettingData.value = false
}

const submit = async (e: Event) => {
  e.preventDefault()
  submitting.value = true

  try {
    await axios.post(`/invoice/${props.invoice.ID}/item`, toRaw(item.value))
    itemSelection.value = null
    item.value = new InvoiceItem()
    emit("added")
  } catch (err: any) {
    const statusCode: any = err.request.status
    const res: any = JSON.parse(err.request.response)

    switch (statusCode) {
      case 400:
        toast.error(res.error)
        break
      case 409:
        toast.error(res.error)
        break
      default:
        console.error(err)
        toast.error('An unhandled exception occoured. Please check logs')
    }
  }

  submitting.value = false
}

// when item is selected,
// set item to the newly selected item
const itemSelected = async () => {
  const is: any = toRaw(itemSelection.value)
  const i = new InvoiceItem()
  i.Name = is.Name
  i.Description = is.Description
  i.HSN = is.HSN
  i.UnitPrice = is.UnitPrice
  i.GSTPercentage = is.GSTPercentage
  i.UnitOfMeasure = is.UnitOfMeasure
  i.BrandName = is.Brand.Name
  i.Quantity = "1"

  item.value = i
}

onMounted(() => {
  getAllItems()
})
</script>

<template>
  <form class="row g-3" v-on:submit="submit">
    <div class="col-md-1"><!-- spacer --></div>

    <div class="col-md-3">
      <label for="item-brand-input" class="form-label">Item</label>
      <select
        v-model="itemSelection"
        @change="itemSelected()"
        class="form-select"
        aria-label="Select Item"
        id="item-input"
      >
        <option selected disabled value="null">Select Item</option>
        <option v-for="item in allItems" :value="item" :key="item['id']">
          {{ item["Name"] }} ({{ item["Brand"]["Name"] }})
        </option>
      </select>
    </div>

    <div class="col-md-3">
      <label for="inputDescription" class="form-label">Description</label>
      <input
        type="text"
        class="form-control"
        id="inputDescription"
        v-model="item.Description"
      />
    </div>

    <div class="col-md-1">
      <label for="inputHSN" class="form-label">HSN</label>
      <input
        type="text"
        class="form-control"
        id="inputHSN"
        v-model="item.HSN"
      />
    </div>

    <div class="col-md-1">
      <label for="inputQty" class="form-label">Quantity {{ item.UnitOfMeasure === "" ? "" : `(${item.UnitOfMeasure})` }}</label>
      <input
        type="text"
        class="form-control"
        id="inputQty"
        v-model="item.Quantity"
      />
    </div>

    <div class="col-md-1">
      <label for="inputUnitPrice" class="form-label">Unit Price</label>
      <input
        type="text"
        class="form-control"
        id="inputUnitPrice"
        v-model="item.UnitPrice"
      />
    </div>

    <div class="col-md-1">
      <label for="inputGST" class="form-label">GST (%)</label>
      <input
        type="text"
        class="form-control"
        id="inputGST"
        v-model="item.GSTPercentage"
      />
    </div>

    <div class="col-md-10"><!-- spacer --></div>

    <div class="col-md-1 d-flex align-items-end justify-content-end">
      <button
        type="submit"
        class="btn btn-primary btn-block"
        :class="{ disabled: submitting || gettingData || itemSelection === null }"
      >
        Add
        <div v-if="submitting" class="spinner-border spinner-border-sm ms-1" role="status">
          <span class="sr-only"></span>
        </div>
      </button>
    </div>
  </form>
</template>
