<template>
    <div class="vehicle_banner mb-3 text-center">
        <img class="vehicle-image img-fluid" :src="vehicleImageToDisplay" alt="" />
    </div>
</template>

<script>
export default {
    name: "vehicle-banner",
    props: {
        displayGenericVehicleImage: {
            type: Boolean,
            required: true,
        },
        cmsWidgetName: String,
        displayVehicleImage: {
            type: String,
            required: false,
            default: null,
        },
        displayUnmatchedVehicleIcon: {
            type: Boolean,
            required: false,
            default: false,
        },
        vehicleCategory: {
            type: String,
            required: false,
            default: null,
        },
    },
    computed: {
        vehicleImageToDisplay() {
            if (this.displayVehicleImage !== null) {
                return this.displayVehicleImage;
            }
            if (this.displayGenericVehicleImage) {
                return this.genericVehicleImage;
            }
            if (
                this.$store.getters.vehicle.imageUrl === null ||
                this.$store.getters.vehicle.imageUrl === "NULL" ||
                this.displayUnmatchedVehicleIcon
            ) {
                return this.getUnmatchedVehicleIcon();
            }

            return this.$store.getters.vehicle.imageUrl;
        },
        genericVehicleImage() {
            return this.getCmsContent(this.cmsWidgetName, "GenericVehicleImage");
        },
        carUnmatchedVehicleIcon() {
            return this.getCmsContent(this.cmsWidgetName, "CarUnmatchedVehicleIcon");
        },
        truckUnmatchedVehicleIcon() {
            return this.getCmsContent(this.cmsWidgetName, "TruckUnmatchedVehicleIcon");
        },
        vanUnmatchedVehicleIcon() {
            return this.getCmsContent(this.cmsWidgetName, "VanUnmatchedVehicleIcon");
        },
        commercialUnmatchedVehicleIcon() {
            return this.getCmsContent(this.cmsWidgetName, "CommercialVanUnmatchedVehicleIcon");
        },
        suvUnmatchedVehicleIcon() {
            return this.getCmsContent(this.cmsWidgetName, "SuvUnmatchedVehicleIcon");
        },
    },
    methods: {
        getUnmatchedVehicleIcon() {
            const category = this.vehicleCategory ?? this.$store.getters.vehicle.category;
            switch (category) {
                case this.vehicleCategories.CAR:
                    return this.carUnmatchedVehicleIcon;
                case this.vehicleCategories.SUV:
                    return this.suvUnmatchedVehicleIcon;
                case this.vehicleCategories.TRUCK:
                    return this.truckUnmatchedVehicleIcon;
                case this.vehicleCategories.VAN:
                    return this.vanUnmatchedVehicleIcon;
                case this.vehicleCategories.COMMERCIALVAN:
                    return this.commercialUnmatchedVehicleIcon;
                default:
                    return this.carUnmatchedVehicleIcon;
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.vehicle-image {
    max-width: 290px;
    object-fit: cover;
    width: 100%;
    height: 132px;
}
</style>
