<template>
    <buttonQuestion
        class="address-vehicles-question"
        buttonTypeString="listButton"
        groupName="ChooseAddressVehicle"
        :questionText="questionText"
        :answers="vehicles"
        v-model="selectedVehicleVin"
        isRequired
        :validation-rules="validationRules"
        :valueToLogType="ValueToLogTypes.LAST_5" />
    <alert
        ref="differentVehicleAlert"
        v-if="isCarIdDifferent"
        class="my-3"
        cmsWidgetName="FoundWindshield"
        :manualHeadline="differentVehicleAlertHeader"
        :manualCopy="differentVehicleAlertBody"
        alertClass="alert-warning"
        v-bind:isDismissible="false" />
</template>

<script>
import buttonQuestion from "@/digital-components/button-question/button-question";
import alert from "@/ux-components/alert/alert";

// Supporting files
import { getDamageString } from "@/helpers/damage-helper";

export default {
    name: "address-vehicles-question",
    props: {
        vehicles: Array,
        modelValue: String,
        cmsWidgetName: String,
        validationRules: String,
        isCarIdDifferent: Boolean,
    },
    computed: {
        differentVehicleAlertHeader() {
            return this.getCmsContent("FoundWindshield", "HeadlineText").replaceAll(
                "{custom:damage}",
                getDamageString()
            );
        },
        differentVehicleAlertBody() {
            return this.getCmsContent("FoundWindshield", "BodyText")
                .replaceAll("{custom:damage}", getDamageString())
                .replaceAll("{custom:vinlookupYear}", this.selectedVehicle?.vehicle.year)
                .replaceAll("{custom:vinlookupMake}", this.selectedVehicle?.vehicle.make)
                .replaceAll("{custom:vinlookupModel}", this.selectedVehicle?.vehicle.model);
        },
        questionText() {
            return this.getCmsContent("VehicleConfirmationQuestion", "QuestionText");
        },
        selectedVehicleVin: {
            get: function () {
                return this.modelValue;
            },
            set: function (newValue) {
                this.$emit("update:modelValue", newValue);
            },
        },
        selectedVehicle() {
            // this computed is only needed for the computed differentVehicleAlertBody text above
            return this.vehicles.find(({ vin }) => vin === this.selectedVehicleVin);
        },
    },
    components: {
        buttonQuestion,
        alert,
    },
};
</script>

<style lang="scss">
.address-vehicles-question {
    .question-text {
        margin-bottom: 0.5rem;

        & > span {
            text-align: left;
        }
    }
}
</style>
