<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>
<!--@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="!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-primary-500 h-[90px] mt-12 mb-[86px] 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]"
            @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 { computed } from 'vue'
import { storeToRefs } from 'pinia'
import { useWeighingShipment } from '~/composables/useWeighing'
import { usePdfPrinter } from '~/composables/usePdfPrinter'
import { useShipmentStore } from '~/stores/shipment'

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

const router = useRouter()
const shipmentStore = useShipmentStore()
const { current: storeShipment } = storeToRefs(shipmentStore)
const { printPdf } = usePdfPrinter()
const {
    displayWeight,
    title,
    showLoadingBox,
    fetchWeight,
    saveWeight
} = useWeighingShipment({
    modeShipment: props.mode,
    shipment: storeShipment,
    updateShipment: shipmentStore.updateShipment,
    loadShipment: shipmentStore.loadShipment
})
// Affiche le bouton de génération du bon à l'étape tare
const showGenerateReceipt = computed(
    () => props.mode === 'tare' && displayWeight.value !== null
)

// Génère le bon d'expédition, puis clôture l'expédition
const printReceipt = async () => {
    if (!import.meta.client || !shipmentStore.current) {
        return
    }

    await saveWeight()
    const shipment = shipmentStore.current
    const filename = `${shipment.identificationNumber ?? shipment.id}_${shipment.customer?.label ?? 'client'}_${shipment.licensePlate ?? 'immat'}.pdf`
    await printPdf(`/shipments/${shipment.id}/receipt`, filename)

    // Laisse le temps a la boite de dialogue d'impression de s'ouvrir.
    await new Promise((resolve) => setTimeout(resolve, 600))

    const result = await shipmentStore.updateShipment(shipmentStore.current.id, {
        isValid: true
    })
    if (!result) {
        return
    }

    shipmentStore.clearCurrent()
    await router.push('/')
}

</script>
