<script setup>
import { computed } from 'vue';
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';

    const props = defineProps({
        vehicle: {
            type: Object,
            required: true
        },
        driver: {
            type: Object,
            required: false
        }
    })

    console.log(props.vehicle)

    const { t } = useI18n()

    const isShow = ref(false);

    const toogle = () => {
        isShow.value = !isShow.value;
    }

    const driver = computed(() => {
        if(props?.driver) {
            return !props?.driver ? 'No definido'
                : props?.driver.first_name + ' ' + props?.driver.last_name
        } else {
            return props.vehicle.driver.first_name + ' ' + props.vehicle.driver.last_name;            
        }
    });
</script>

<template>
    <a 
        @click="toogle"
        class="btn-text mt-4 mb-2"
    >{{ t('vehicles.infoVehicle') }} <i class="fa-solid" :class="[isShow ? 'fa-chevron-up' : 'fa-chevron-down']"></i></a>

    <div v-if="isShow">
        <div class="divider"></div>
        <!-- <h2 class="my-3">Información del vehiculo</h2> -->
        <div class="row my-2">
            <div class="col-lg-6">
                <p>{{ t('labels.codeId') }}: <span>{{ vehicle.vehicle_code.toUpperCase() }}</span></p>
                <p>{{ t('directory.typeTruck') }}: <span>{{ vehicle.truck_type }}</span></p>
                <p>{{ t('vehicles.assignedDriver') }}: <span>{{ driver }}</span></p>
                <p>{{ t('global.segment') }}: <span>{{ vehicle.categories?.map((e) => e.name)?.join(', ') }}</span></p>
            </div>
            <div class="col-lg-6">
                <p>{{ t('vehicles.truckPlates') }}: <span>{{ vehicle.circulation_serial_number }}</span></p>
                <p>{{ t('vehicles.trailerPlates') }} 1: <span>{{ vehicle.trailer_plate_1 }}</span></p>
                <p>{{ t('vehicles.trailerPlates') }} 2: <span>{{ vehicle.trailer_plate_2 }}</span></p>
                <p>{{ t('vehicles.chargingBase') }}: <span>{{ vehicle.city }}, {{ vehicle.state }}</span></p>
            </div>
        </div>
        <div class="col-12">
            <p>{{ t('vehicles.additionalInfoVehicle') }}: <span>{{ vehicle.notes }}</span></p>
        </div>
    </div>
</template>

<style scoped>
    h2 {
        font-size: 1.2rem;
        font-weight: 500;
    }

    p {
        font-size: 1rem;
        font-weight: 400;
        color: #323032;
        font-weight: 700;
    }
    
    p span {
        color: #323032;
        font-weight: normal;
    }
</style>