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

const supabase = useSupabaseClient()

const spaces = (await supabase.from("spaces").select()).data
const movements = (await supabase.from("movements").select()).data
const products = (await supabase.from("products").select()).data



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

const toast = useToast()

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: "",
    spaceId: "",
    quantity: 0
  }
}

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

</script>

<template>
  <div id="main">
    <router-link to="/inventory/spaces"><UButton>Lagerplätze</UButton></router-link>

    <!--<UInput
        icon="i-heroicons-magnifying-glass-20-solid"
        variant="outline"
        color="primary"
        placeholder="Barcode / Suche"
        v-model="searchinput"
    />-->

    <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>

    <UFormGroup
        label="Artikel:"
        class="mt-3"
    >
      <UInput
          variant="outline"
          :color="checkArticle(inventoryChangeData.productId) ? 'primary' : 'rose'"
          placeholder="Barcode / Suche"
          v-model="inventoryChangeData.productId"
      />
    </UFormGroup>

    <UFormGroup
        label="Lagerplatz:"
        class="mt-3"
    ><!--.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"
      />
    </UFormGroup>

    <UFormGroup
        label="Anzahl:"
        class="mt-3"
    >
      <UInput
          variant="outline"
          color="primary"
          placeholder="Anzahl"
          v-model="inventoryChangeData.quantity"
          type="number"
      />
    </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: row;*/
}
#left {
  width: 25vw;
}

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