<template>
    <div class="flex justify-between h-[52px] mb-[80px]">
        <div class="flex flex-1 mr-16">
            <UiStepper
                :labels="stepLabels"
                :current-step="storeReception?.currentStep ?? 0"
                @select="handleStepSelect"
            />
        </div>
        <UiButton
            type="button"
            class="flex flex-col justify-center uppercase text-xl bg-black text-white h-[50px] w-[272px] text-center"
            @click="saveAndHold"
        >Mettre en attente
        </UiButton>
    </div>
    <ReceptionForm v-if="!storeReception || storeReception.currentStep === 0"/>
    <WorkflowWeight
        v-if="storeReception?.currentStep === 1"
        mode="gross"
        entity-name="reception"
        api-resource="receptions"
        :title-label="receptionConfig.weighingLabels.gross"
        :is-final="false"
        :entity="storeReception"
        :get-weight-from-scale="getWeight"
        :update-entity="receptionStore.updateReception"
        :load-entity="receptionStore.loadReception"
        :clear-entity="receptionStore.clearCurrent"
        :build-receipt-filename="receptionConfig.buildReceiptFilename"
    />
    <ReceptionProductReceived
        v-if="storeReception?.currentStep === 2 &&
            receptionStore.current?.receptionType?.code === RECEPTION_TYPE_CODES.MERCHANDISES"/>
    <ReceptionBovineReceived
        v-if="storeReception?.currentStep === 2 &&
            receptionStore.current?.receptionType?.code === RECEPTION_TYPE_CODES.BOVINS"/>
    <WorkflowWeight
        v-if="storeReception?.currentStep !== null && storeReception?.currentStep >= 3"
        mode="tare"
        entity-name="reception"
        api-resource="receptions"
        :title-label="receptionConfig.weighingLabels.tare"
        :is-final="true"
        :entity="storeReception"
        :get-weight-from-scale="getWeight"
        :update-entity="receptionStore.updateReception"
        :load-entity="receptionStore.loadReception"
        :clear-entity="receptionStore.clearCurrent"
        :build-receipt-filename="receptionConfig.buildReceiptFilename"
    />
</template>

<script setup lang="ts">
import { useReceptionStore } from '~/stores/reception'
import { storeToRefs } from 'pinia'
import { useWorkflowSteps } from '~/composables/useWorkflowSteps'
import { receptionConfig } from '~/config/reception.config'
import { getWeight } from '~/services/reception'
import { RECEPTION_TYPE_CODES } from '~/utils/constants'

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

const { stepLabels, saveAndHold, handleStepSelect } = useWorkflowSteps(receptionConfig, receptionStore)

// Init route watcher
const route = useRoute()
watch(
    () => route.params.id,
    async (param) => {
        const idStr = Array.isArray(param) ? param[0] : param
        if (!idStr) {
            receptionStore.clearCurrent()
            return
        }
        const id = Number(idStr)
        if (Number.isFinite(id)) {
            await receptionStore.loadReception(id)
        }
    },
    { immediate: true }
)
</script>
