<template>
    <template v-if="!isLiotCarrier">
        <div :class="wrapperClass">
            <UiLicensePlateInput
                v-model="form.licensePlate"
                v-model:allowAny="allowAnyLicensePlate"
            />
        </div>
    </template>
    <template v-if="isLiotCarrier">
        <UiSelect
            :id="`${idPrefix}-vehicle`"
            v-model="form.vehicleId"
            label="Immatriculation"
            :options="filteredVehicles.map((vehicle) => ({
                value: String(vehicle.id),
                label: vehicle.plate
            }))"
            :loading="isLoadingVehicles"
            :disabled="isLoadingVehicles || filteredVehicles.length === 0"
            :wrapper-class="wrapperClass"
        />
        <UiSelect
            :id="`${idPrefix}-driver`"
            v-model="form.driverId"
            label="Nom du chauffeur si LIOT"
            :options="filteredDrivers.map((driver) => ({
                value: String(driver.id),
                label: driver.name
            }))"
            :loading="isLoadingDrivers"
            :wrapper-class="driverWrapperClass"
        />
    </template>
</template>

<script setup lang="ts">
import type { DriverData } from '~/services/dto/driver-data'
import type { VehicleData } from '~/services/dto/vehicle-data'

defineProps<{
    idPrefix: string
    form: { licensePlate: string; vehicleId: string; driverId: string }
    isLiotCarrier: boolean
    allowAnyLicensePlate: boolean
    filteredVehicles: VehicleData[]
    filteredDrivers: DriverData[]
    isLoadingVehicles: boolean
    isLoadingDrivers: boolean
    wrapperClass?: string
    driverWrapperClass?: string
}>()

defineEmits<{
    'update:allowAnyLicensePlate': [value: boolean]
}>()
</script>
