<script setup>
const props = defineProps({
  info: Object
})

const storages = ref([])
const retrieve = async () => {
  if(props.info?.id) {
    const res = await $fetch('/api/materials/products/'+props.info.id+'/located-at', {
      headers: useRequestHeaders(['cookie'])
    })
    if(res) {
      storages.value = setStorage(res.records)
    }
  }
}
onMounted(retrieve)
watch(() => props.info, () => {
  retrieve()
})
const setStorage = (items) => {
  let newItems = []
  for(let item of items) {
    if(newItems.find(i => i?.M_Locator_ID?.M_Warehouse_ID?.id && i?.M_Locator_ID?.M_Warehouse_ID?.id == item?.M_Locator_ID?.M_Warehouse_ID?.id)) {
      const indItem = newItems.findIndex(i => i?.M_Locator_ID?.M_Warehouse_ID?.id == item?.M_Locator_ID?.M_Warehouse_ID?.id)
      const newItem = newItems[indItem]
      newItem.QtyOnHand = Number(newItem.QtyOnHand ?? 0) + Number(item.QtyOnHand ?? 0)
      newItem.QtyReserved = Number(newItem.QtyReserved ?? 0) + Number(item.QtyReserved ?? 0)
      newItems.splice(indItem, 1, newItem)
    } else {
      newItems.push(item)
    }
  }
  return newItems
}

/*const storages = ref([])
const setStorage = () => {
  storages.value = []
  for(let item of props.items) {
    if(storages.value.find(i => i?.M_Locator_ID?.M_Warehouse_ID?.id && i?.M_Locator_ID?.M_Warehouse_ID?.id == item?.M_Locator_ID?.M_Warehouse_ID?.id)) {
      const indItem = storages.value.findIndex(i => i?.M_Locator_ID?.M_Warehouse_ID?.id == item?.M_Locator_ID?.M_Warehouse_ID?.id)
      const newItem = storages.value[indItem]
      newItem.QtyOnHand = Number(newItem.QtyOnHand ?? 0) + Number(item.QtyOnHand ?? 0)
      newItem.QtyReserved = Number(newItem.QtyReserved ?? 0) + Number(item.QtyReserved ?? 0)
      storages.value.splice(indItem, 1, newItem)
    } else {
      storages.value.push(item)
    }
  }
}
onMounted(setStorage)
watch(() => props.items, setStorage)*/

/*const storages = computed(() => {
  let newItems = []
  for(let item of props.items) {
    if(newItems.find(i => i?.M_Locator_ID?.M_Warehouse_ID?.id && i?.M_Locator_ID?.M_Warehouse_ID?.id == item?.M_Locator_ID?.M_Warehouse_ID?.id)) {
      const indItem = newItems.findIndex(i => i?.M_Locator_ID?.M_Warehouse_ID?.id == item?.M_Locator_ID?.M_Warehouse_ID?.id)
      const newItem = newItems[indItem]
      newItem.QtyOnHand = Number(newItem.QtyOnHand) + Number(item.QtyOnHand)
      newItem.QtyReserved = Number(newItem.QtyReserved) + Number(item.QtyReserved)
      newItems.splice(indItem, 1, newItem)
    } else {
      newItems.push(item)
    }
  }
  return newItems
})*/
</script>

<template>
  <div>
    <div class="tableResponsive">
      <table class="table tableList tableFlush">
        <thead>
          <tr>
            <th>Warehouse</th>
            <th>Available</th>
            <th>On Hand Quantity</th>
            <th>Reserved Quantity</th>
          </tr>
        </thead>
        <tbody>
          <tr v-if="Number(storages.length) === 0">
            <td colspan="6" class="align-center">No record found.</td>
          </tr>
          <tr v-for="(entry, index) in storages" :key="index">
            <td>{{ entry?.M_Locator_ID?.M_Warehouse_ID?.identifier || '' }}</td>
            <td>{{ Number(entry?.QtyOnHand || 0) - Number(entry?.QtyReserved || 0) }}</td>
            <td>{{ entry?.QtyOnHand || 0 }}</td>
            <td>{{ entry?.QtyReserved || 0 }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>