<script setup>
definePageMeta({
  middleware: "auth"
})

import {StreamBarcodeReader} from "vue-barcode-reader"

const supabase = useSupabaseClient()

const {spaces, movements, products} = storeToRefs(useDataStore())


const searchinput = ref("")
const mode = ref("")

const toast = useToast()
const showReader = ref(false)

const inventoryChangeData = ref({
  productId: "",
  spaceId: "",
  quantity: 0
})

const createMovement = async () => {
  if(mode.value === 'incoming'){
    //await create('movements', inventoryChangeData.value)

    const {data,error} = await supabase
        .from("movements")
        .insert([inventoryChangeData.value])
        .select()

    console.log(error)


  } else if (mode.value === 'outgoing'){
    inventoryChangeData.value.quantity *= -1
    //await create('movements', inventoryChangeData.value)

    const {data,error} = await supabase
        .from("movements")
        .insert([inventoryChangeData.value])
        .select()

    console.log(error)
  } else if (mode.value === 'change'){}

  inventoryChangeData.value = {
    productId: 0,
    spaceId: 0,
    quantity: 0
  }
}

function checkArticle(productId) {
  return products.value.filter(product =>product.ean === productId).length > 0;
}
function checkSpaceId(spaceId) {
  return spaces.value.filter(space => Number(space.spaceNumber) === Number(spaceId)).length > 0;
}

function changeFocusToSpaceId() {
  document.getElementById('spaceIdInput').focus()
}

function changeFocusToQuantity() {
  document.getElementById('quantityInput').focus()
}

</script>

<template>
  <div id="main">

    <div class="my-3">
      <UButton @click="mode = 'incoming'" class="ml-3" >Wareneingang</UButton>
      <UButton @click="mode = 'outgoing'" class="ml-1">Warenausgang</UButton>
      <UButton @click="mode = 'change'" class="ml-1" disabled>Umlagern</UButton>
    </div>


    <UFormGroup
        label="Artikel:"
        class="mt-3 w-80"
    >
      <UInput
          variant="outline"
          :color="checkArticle(inventoryChangeData.productId) ? 'primary' : 'rose'"
          v-model="inventoryChangeData.productId"
          v-on:keyup.enter="changeFocusToSpaceId"
      />
    </UFormGroup>

    <UFormGroup
        label="Lagerplatz:"
        class="mt-3 w-80"
    ><!--.map(space => {return  {id: space.id, name: space.spaceNumber}}-->
<!--      <USelectMenu
        :options="spaces"
        searchable
        option-attribute="spaceNumber"
        :color="checkSpaceId(inventoryChangeData.spaceId) ? 'primary' : 'rose'"
        v-model="inventoryChangeData.spaceId"
        value-attribute="id"
      />-->
      <UInput
        v-model="inventoryChangeData.spaceId"
        :color="checkSpaceId(inventoryChangeData.spaceId) ? 'primary' : 'rose'"
        id="spaceIdInput"
        v-on:keyup.enter="changeFocusToQuantity"
      />
    </UFormGroup>

    <UFormGroup
        label="Anzahl:"
        class="mt-3 w-80"
    >
      <UInput
          variant="outline"
          color="primary"
          placeholder="Anzahl"
          v-model="inventoryChangeData.quantity"
          type="number"
          id="quantityInput"
      />
    </UFormGroup>
    <UButton
        @click="createMovement"
        :disabled="mode === '' && checkSpaceId(inventoryChangeData.spaceId) && checkArticle(inventoryChangeData.productId)"
      class="mt-3"
    >
      Bestätigen
    </UButton>


  </div>



</template>

<style scoped>
#main {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#left {
  width: 25vw;
}

#right {
  width: 60vw;
  padding-left: 3vw;
}
</style>