<template>
    <div class="flex items-center justify-start gap-10">
        <Icon @click="router.push('/')" name="gg:arrow-left-o" size="44" class="cursor-pointer text-primary-500"/>
        <h1 class="text-3xl font-bold uppercase text-primary-500">listes des expéditions finie</h1>
    </div>

    <div class="px-[86px]">
        <div class="mt-6 border border-slate-200 mb-16 ">
            <div class="grid grid-cols-6 gap-4 bg-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide">
                <div>Numéro</div>
                <div>Date</div>
                <div>Client</div>
                <div>Adresse</div>
                <div>Type d'expéditon</div>
                <div>Poids</div>
            </div>
            <div
                v-for="shipment in shipmentList"
                :key="shipment
               .id"
                class="grid grid-cols-6 gap-4 px-4 py-3 text-sm hover:bg-slate-50 cursor-pointer border-t border-slate-200"
                role="button"
                tabindex="0"
                @click="goShipment(shipment.id)"
            >
                <div>{{ shipment.identificationNumber }}</div>
                <div>{{ shipment.shipmentDate }}</div>
                <div>{{ shipment.customer?.name }}</div>
                <div>{{ shipment.address?.fullAddress }}</div>
                <div>
                    <template v-if="formatBovinShipmentLines(shipment).length">
                        <div
                            v-for="(line, index) in formatBovinShipmentLines(shipment)"
                            :key="index"
                            class="leading-5"
                        >
                            {{ line }}
                        </div>
                    </template>
                </div>
                <div>{{ formatWeighing(shipment) }}</div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import type {ShipmentData} from "~/services/dto/shipment-data";
import {getShipmentList} from "~/services/shipment";

const shipmentList = ref<ShipmentData[]>()
const router = useRouter()

const formatWeighing = (shipment: ShipmentData) => {
    const gross = shipment.weights?.find((weight) => weight.type === 'gross')?.weight
    const tare = shipment.weights?.find((weight) => weight.type === 'tare')?.weight

    if (gross == null || tare == null) {
        return '—'
    }

    return `${gross - tare} kg`
}

const formatBovinShipmentLines = (shipment: ShipmentData) => {
    if (!shipment.bovinShipments?.length) {
        return []
    }
    return shipment.bovinShipments.map((entry) => {
        const label = typeof entry.shipmentType === 'string'
            ? entry.shipmentType
            : entry.shipmentType?.label
        return `${label ?? '—'} : ${entry.nbBovinSend ?? '—'}`
    })
}

const goShipment = (id: number) => {
    router.push(`/shipment/update/${id}`)
}

onMounted(async () => {
    shipmentList.value = await getShipmentList(true)
})
</script>
