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

const {find,create, update} = useStrapi4()
const spaces = (await find('spaces',{populate: "*"})).data
const movements = (await find('movements',{populate: "*"})).data
const products = (await find('products',{populate: "*"})).data


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

const selectItem = (item) => {
  selectedItem.value = item
  spaceMovements.value = movements.filter(movement => movement.attributes.spaceId === selectedItem.value.attributes.spaceNumber)
  spaceMovements.value.forEach(movement => {
    if(!spaceProducts.value.includes(movement.attributes.productId)) spaceProducts.value.push(movement.attributes.productId)
  })




}

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

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

  await create('spaces', {...createSpaceData.value, spaceNumber: String(Number(lastSpaceNumber)+1)})
  showCreateSpace.value = false
  createSpaceData.value = {}

}

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

function getSpaceProductCount(productId) {
  let productMovements = spaceMovements.value.filter(movement => movement.attributes.productId === productId)
  let count = 0;
  productMovements.forEach(movement => count += movement.attributes.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.attributes.spaceNumber}} - {{item.attributes.type}}
        </UCard>
      </a>
    </div>
    <div id="right">
      <UCard v-if="selectedItem.attributes">
        <template #header>
          <UBadge class="mr-1">{{selectedItem.attributes.spaceNumber}}</UBadge>{{selectedItem.attributes.type}}
        </template>
        {{selectedItem.attributes.description}}


      </UCard>


      <p class="mt-5">Artikel in diesem Lagerplatz</p>
      <p v-for="product in spaceProducts">{{products.find(productItem => Number(productItem.id) === Number(product)).attributes.name}} - {{getSpaceProductCount(product)}} {{products.find(productItem => Number(productItem.id) === Number(product)).attributes.unit}}</p>
    </div>
  </div>
</template>

<style scoped>

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

#left {
  width: 25vw;
}

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