<template>
    <div v-if="errorMessage" class="text-red-600">{{ errorMessage }}</div>
    <div v-if="isLoading" class="text-neutral-600">Chargement...</div>
    <div v-else>
        <ReceptionForm v-if="storeReception?.currentStep === 0"/>
        <ReceptionWeight v-if="storeReception?.currentStep === 1"/>
        <div v-if="storeReception?.currentStep === 2">Décharger</div>
        <ReceptionWeight v-if="storeReception?.currentStep === 3"/>
    </div>
</template>

<script setup lang="ts">
import { createReception, getReception } from '~/services/reception'
import type { ReceptionData } from '~/services/dto/reception-data'
import { useReceptionStore } from '~/stores/reception'
import { storeToRefs } from 'pinia'

const route = useRoute()
const router = useRouter()

const isLoading = ref<boolean>(false)
const errorMessage = ref<string | null>(null)
const receptionStore = useReceptionStore()
const { current: storeReception } = storeToRefs(receptionStore)

onMounted(async () => {
    isLoading.value = true
    const raw = route.params.id
    const idStr = Array.isArray(raw) ? raw[0] : raw
    const id = idStr ? Number(idStr) : null

    try {
        const result = id === null ? await createReception() : await getReception(id)
        if (result) {
            receptionStore.setCurrent(result as ReceptionData)
        }
    } catch (error) {
        errorMessage.value = error.error ?? 'Erreur inconnue.'
    }
    isLoading.value = false
})
</script>
