<template>
    <div class="flex justify-center">
        <div class="flex flex-col items-center w-[660px]">
            <h1 class="font-bold text-5xl uppercase">{{ title }}</h1>
<!--@TODO Voir comment faire pour savoir si le pont-bascule et bien connecté + ajouter un icon comme sur la maquette-->
            <p class="text-primary-500 uppercase text-2xl mt-2">Pont-bascule connecté</p>
            <div
                v-if="errorMessage || showLoadingBox"
                class="w-full flex flex-col items-center justify-center border border-black h-[90px] mt-12 mb-[86px]">
                    <p v-if="errorMessage" class="text-red-500">{{ errorMessage }}</p>
                    <UiLoadingDots v-else />
            </div>
            <div v-else-if="displayWeight !== null" class="w-full">
                <div
                    class="w-full flex flex-col items-center justify-center border border-black h-[90px] mt-12 mb-[25px] text-4xl">
                    {{ displayWeight }} kg
                </div>
                <div class="grid grid-cols-2 border border-black text-center">
                    <p class="border-r border-black py-3 text-4xl font-bold">DSD</p>
                    <p class="py-3 text-4xl">{{ displayDsd }}</p>
                </div>
            </div>
        </div>
    </div>
    <div class="flex justify-center mt-[54px]">
        <button
            class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
            @click="fetchWeight"
        >{{ displayWeight !== null ? 'refaire une pesee' : 'peser' }}</button>
        <button
            v-if="displayWeight !== null"
            class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px] ml-4"
            @click="saveWeight"
        >Valider la pesée</button>
    </div>

</template>

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

const props = defineProps<{
    mode: 'gross' | 'tare'
}>()

const receptionStore = useReceptionStore()
const { current: storeReception, errorMessage: storeErrorMessage } = storeToRefs(receptionStore)
const {
    displayWeight,
    displayDsd,
    title,
    errorMessage,
    showLoadingBox,
    fetchWeight,
    saveWeight
} = useWeighing({
    mode: props.mode,
    reception: storeReception,
    updateReception: receptionStore.updateReception,
    loadReception: receptionStore.loadReception,
    storeError: storeErrorMessage
})
// @TODO Voir comment mettre en place la genération du bon, la validation de la reception et le dernier step

</script>
