<template>
    <div
        v-if="receptionStore.current?.receptionType?.code === RECEPTION_TYPE_CODES.BOVINS"
        class="flex flex-col items-center gap-16">
        <h1 class="text-4xl uppercase font-bold">Sélection des marchandises réceptionnnées</h1>
        <div
            class="flex flex-row gap-16 items-center w-full">
            <div
                v-for="type in bovineType"
                :key="type.id"
                class="mt-8 flex flex-row mb-2 gap-6">
                <UiNumberInput
                    :label="type.label"
                    :code="type.code"
                    v-model="selectedBovineTypeIds[type.id]"
                    :value="String(type.id)"
                />
            </div>
            <div
                class="mt-8 flex flex-row mb-2 gap-6">
                <UiNumberInput
                    label="Autres"
                />
            </div>
        </div>
        <button
            class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
            @click="goNext"
        >Peser
        </button>
    </div>
</template>
<script setup lang="ts">
import type {BovineTypeData} from "~/services/dto/bovine-type-data";
import {getBovineTypeList} from "~/services/bovine-type";
import {RECEPTION_TYPE_CODES} from "~/utils/constants";
import {useReceptionStore} from '~/stores/reception'
import {
    createReceptionBovine,
    deleteReceptionBovine,
    getReceptionBovineList
} from "~/services/reception-bovine";
import {ref} from "vue";

const isLoadingBovineType = ref(false)
const bovineType = ref<BovineTypeData[]>([])
const receptionStore = useReceptionStore()
const selectedBovineTypeIds = ref<string[]>
const loadBovineType = async () => {
    isLoadingBovineType.value = true
    try {
        bovineType.value = await getBovineTypeList()
    } finally {
        isLoadingBovineType.value = false
    }
}


onMounted(async () => {

    await loadBovineType()
    selectedBovineTypeIds.value=bovineType.value.map((type) => String(type.id))
})

async function goNext() {
    if (!receptionStore.current) {
        return
    }
    const nextStep = receptionStore.current.currentStep + 1
    const receptionIri = `/api/receptions/${receptionStore.current.id}`
    console.log(selectedBovineTypeIds.value)
    await receptionStore.updateReception(receptionStore.current.id, {
        merchandiseType: null,
        merchandiseDetail: null,
        buildings: null,
        bovinesTypes : selectedBovineTypeIds.value.map((id) => `/api/bovines_types/${id}`),
        currentStep: nextStep
    })
}
</script>


