<template>
    <div>
        <div class="flex justify-between h-[52px] mb-[90px]">
            <p class="self-center">Indicateur d’étapes</p>
            <NuxtLink to="/" class="flex flex-col justify-center uppercase text-xl bg-black text-white h-[50px] w-[272px] text-center">Mettre en attente</NuxtLink>
        </div>
        <ReceptionForm v-if="!storeReception || storeReception.currentStep === 0"/>
        <ReceptionWeight v-if="storeReception?.currentStep === 1" mode="gross"/>
        <ReceptionUnloading v-if="storeReception?.currentStep === 2"/>
        <ReceptionWeight v-if="storeReception?.currentStep !== null && storeReception?.currentStep >= 3" mode="tare"/>
    </div>
</template>

<script setup lang="ts">
import { useReceptionStore } from '~/stores/reception'
import { storeToRefs } from 'pinia'

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

const receptionStore = useReceptionStore()
const { current: storeReception } = storeToRefs(receptionStore)

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

    if (id !== null) {
        await receptionStore.loadReception(id)
    }
})
</script>
