<template>
    <div>
        <div class="flex justify-between h-[52px] mb-[80px]">
            <div class="flex flex-1 mr-16">
                <UiStepper
                    :labels="RECEPTION_STEP_LABELS"
                    :current-step="storeReception?.currentStep ?? 0"
                    @select="handleStepSelect"
                />
            </div>
            <button
                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</button>
        </div>
        <ReceptionForm v-if="!storeReception || storeReception.currentStep === 0"/>
        <ReceptionWeight v-if="storeReception?.currentStep === 1" mode="gross"/>
        <ReceptionProductReceived 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'
import {RECEPTION_STEP_LABELS} from '~/constants/steps'

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

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

const resolveReceptionId = (param: unknown) => {
    const idStr = Array.isArray(param) ? param[0] : param
    if (!idStr) {
        return null
    }
    const id = Number(idStr)
    return Number.isFinite(id) ? id : null
}

watch(
    () => route.params.id,
    async (param) => {
        const id = resolveReceptionId(param)
        if (id === null) {
            receptionStore.clearCurrent()
            return
        }
        await receptionStore.loadReception(id)
    },
    {immediate: true}
)

const saveAndHold = async () => {
    if (!receptionStore.current) {
        await router.push('/')
        return
    }

    await receptionStore.updateReception(receptionStore.current.id, {
        currentStep: receptionStore.current.currentStep,
        licensePlate: receptionStore.current.licensePlate,
        receptionDate: receptionStore.current.receptionDate
    })
    await router.push('/')
}

const handleStepSelect = async (step: number) => {
    if (!receptionStore.current) {
        return
    }

    if (step === receptionStore.current.currentStep) {
        return
    }

    await receptionStore.updateReception(receptionStore.current.id, {
        currentStep: step
    })
    await receptionStore.loadReception(receptionStore.current.id)
}
</script>
