<script setup>
import {move} from "@antfu/utils";

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 units = (await supabase.from("units").select()).data




let selectedItem = ref({})
const showCreateSpace = ref(false)

const selectItem = (item) => {
  selectedItem.value = item
  spaceMovements.value = movements.filter(movement => movement.spaceId === selectedItem.value.id)
  spaceProducts.value = []
  spaceMovements.value.forEach(movement => {
    if(spaceProducts.value.filter(product => product.id === movement.productId).length === 0) spaceProducts.value.push(products.find(product => product.id === movement.productId))
  })




}

const spaceTypes = ["Regalplatz", "Kiste", "Palettenplatz"]

const createSpaceData = ref({})
const createSpace = async () => {
  let lastSpaceNumber = 0
  spaces.forEach(space => {
    if(space.spaceNumber > lastSpaceNumber) lastSpaceNumber = space.spaceNumber
  })

  const {data,error} = await supabase
      .from("spaces")
      .insert([ {...createSpaceData.value, spaceNumber: String(Number(lastSpaceNumber)+1)}])
      .select()

  console.log(error)

  showCreateSpace.value = false
  createSpaceData.value = {}

}

const spaceProducts = ref([])
const spaceMovements = ref([])

function getSpaceProductCount(productId) {
  let productMovements = spaceMovements.value.filter(movement => movement.productId === productId)
  let count = 0;
  productMovements.forEach(movement => count += movement.quantity)

  return count

}

</script>

<template>
  <div id="main">
    <div id="left">
      <UButton @click="showCreateSpace = true">
        Erstellen
      </UButton>
      <UModal v-model="showCreateSpace">
        <UCard>
          <template #header>
            Lagerplatz erstellen
          </template>
          <UFormGroup
            label="Beschreibung:"
          >
            <UTextarea
              v-model="createSpaceData.description"
            />
          </UFormGroup>
          <UFormGroup
            label="Typ:"
          >
            <USelectMenu
              v-model="createSpaceData.type"
              :options="spaceTypes"
            />
          </UFormGroup>

          <template #footer>
            <UButton @click="createSpace">Erstellen</UButton>
          </template>
        </UCard>
      </UModal>
      <a v-for="item in spaces" @click="selectItem(item)">
        <UCard class="listItem">
           {{item.spaceNumber}} - {{item.type}}
        </UCard>
      </a>
    </div>
    <div id="right">
      <div v-if="selectedItem.id">
        <UCard>
          <template #header>
            <UBadge class="mr-1">{{selectedItem.spaceNumber}}</UBadge>{{selectedItem.type}}
          </template>
          {{selectedItem.description}}


        </UCard>
        <div v-if="spaceProducts.length > 0">
          <p class="mt-5">Artikel in diesem Lagerplatz</p>
          <p  v-for="product in spaceProducts">{{product.name}} - {{getSpaceProductCount(product.id)}} {{units.find(unit => unit.id === product.unit).name}}</p>
        </div>
        </div>
     </div>
  </div>
</template>

<style scoped>

#main {
  display: flex;
  flex-direction: row;
}

#left {
  width: 25vw;
}

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