<template>
    <div class="flex justify-center">
        <div class="flex flex-col items-center w-[660px]">
            <h1 class="font-bold text-5xl uppercase text-primary-500">{{ title }}</h1>
            <p
                v-if="pontBasculeStatus === 'connected'"
                class="uppercase text-2xl mt-2 text-green-600">Pont-bascule connecté</p>
            <p
                v-else-if="pontBasculeStatus === 'disconnected'"
                class="uppercase text-2xl mt-2 text-red-600">Pont-bascule non connecté</p>
            <p
                v-else
                class="uppercase text-2xl mt-2 invisible">Pont-bascule connecté</p>
            <div
                v-if="!displayWeight"
                class="w-full flex flex-col items-center justify-center border border-black h-[90px] mt-12 mb-[86px]">
                <UiLoadingDots />
            </div>
            <div v-else 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 text-primary-500">
                    {{ displayWeight }} kg
                </div>
            </div>
        </div>
    </div>
    <div class="flex justify-center mt-[54px]">
        <UiButton
            class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
            :disabled="pontBasculeStatus !== 'connected'"
            @click="fetchWeight"
        >{{ displayWeight !== null ? 'refaire une pesée' : 'peser' }}</UiButton>
        <UiButton
            v-if="displayWeight !== null && !showGenerateReceipt"
            class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px] ml-4"
            @click="saveWeight"
        >Valider la pesée</UiButton>
        <UiButton
            v-if="showGenerateReceipt"
            class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px] ml-4"
            @click="printReceipt"
        >Générer le bon</UiButton>
    </div>
</template>

<script setup lang="ts">
import { onMounted, toRef } from 'vue'
import { usePontBascule } from '~/composables/usePontBascule'
import { useWeighingStep } from '~/composables/steps/useWeighingStep'
import type { WeightData } from '~/services/dto/weight-data'

const props = defineProps<{
    mode: 'gross' | 'tare'
    entityName: 'reception' | 'shipment'
    apiResource: string
    titleLabel: string
    isFinal: boolean
    entity: any
    getWeightFromScale: () => Promise<WeightData>
    updateEntity: (id: number, payload: any) => Promise<any>
    loadEntity: (id: number) => Promise<any>
    clearEntity: () => void
    buildReceiptFilename: (entity: any) => string
}>()

const entityRef = toRef(props, 'entity')

const { status: pontBasculeStatus, checkHealth } = usePontBascule()
onMounted(checkHealth)

const {
    displayWeight,
    title,
    fetchWeight,
    saveWeight,
    saveWeightDraft,
    showGenerateReceipt,
    printReceipt
} = useWeighingStep({
    mode: props.mode,
    entity: entityRef,
    entityName: props.entityName,
    apiResource: props.apiResource,
    titleLabel: props.titleLabel,
    isFinal: props.isFinal,
    getWeightFromScale: props.getWeightFromScale,
    updateEntity: props.updateEntity,
    loadEntity: props.loadEntity,
    clearEntity: props.clearEntity,
    buildReceiptFilename: props.buildReceiptFilename
})

defineExpose({ saveWeightDraft })
</script>
