<template>
    <div v-if="weightData">
        <p>{{ weightData.weight }} kg</p>
        <p>DSD : {{ weightData.dsd }}</p>
    </div>
    <button
        class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
        @click="getReceptionWeight"
    >Peser</button>
</template>

<script setup lang="ts">
import { getWeight } from '~/services/reception'
import type { WeightData } from '~/services/dto/weight-data'
import { useReceptionStore } from '~/stores/reception'

const isLoading = ref(false)
const weightData = ref<WeightData | null>(null)
const errorMessage = ref<string | null>(null)
const receptionStore = useReceptionStore()

async function getReceptionWeight() {
    isLoading.value = true
    try {
        weightData.value = await getWeight()

        if (receptionStore.current) {
            const nextStep = receptionStore.current.currentStep + 1
            await receptionStore.updateReception(receptionStore.current.id, {
                dsd: weightData.value?.dsd ?? null,
                weight: weightData.value?.weight ?? null,
                currentStep: nextStep
            })
        }
    } catch (error) {
        errorMessage.value = error.error
    } finally {
        isLoading.value = false
    }
}
</script>
