<template>
    <div>
        <alert
            v-if="displayMatchedDifferentVehicleAlert"
            id="address-vehicles-question-alert"
            ref="differentVehicleAlert"
            class="my-4"
            cmsWidgetName="AlertMatchedDifferentVehicleWidget"
            :manualHeadline="differentVehicleAlertHeader"
            :manualCopy="differentVehicleAlertBody"
            alertClass="alert-warning"
            :isDismissible="false" />
            <alert
                v-if="displayMatchedTwoIdenticalYMMVehicleAlert"
                id="address-vehicles-question-alert"
                ref="alertMatchedTwoIdenticalYMMVehicle"
                class="my-4"
                cmsWidgetName="AlertMatchedTwoIdenticalYMMVehicleWidget"
                :manualHeadline="AlertMatchedTwoIdenticalYMMVehicleHeader"
                :manualCopy="AlertMatchedTwoIdenticalYMMVehicleBody"
                alertClass="alert-warning"
                :isDismissible="false" />
    </div>
    <buttonQuestion
        ref="addressVehiclesQuestion"
        v-model="selectedVehicleVin"
        class="address-vehicles-question"
        buttonTypeString="listButton"
        groupName="ChooseAddressVehicle"
        :questionText="questionText"
        :answers="vehicles"
        isRequired
        :validationRules="validationRules" />
</template>

<script>
import buttonQuestion from '@/digital-components/button-question/button-question.vue';
import alert from '@/ux-components/alert/alert.vue';
// Supporting files
import { getDamageString } from '@/helpers/damage-helper';

export default {
    name: 'address-vehicles-question',
    components: {
        buttonQuestion,
        alert
    },
    props: {
        vehicles: Array,
        vehicleSelected: Object,
        modelValue: String,
        cmsWidgetName: String,
        validationRules: String,
        isCarIdDifferent: Boolean,
        displayMatchedDifferentVehicleAlert: Boolean,
        displayMatchedTwoIdenticalYMMVehicleAlert: Boolean
    },
    emits: ['update: modelValue'],
    computed: {
        differentVehicleAlertHeader() {
            return this.getCmsContent(
                'AlertMatchedDifferentVehicleWidget',
                'HeadlineText'
            ).replaceAll('{custom:damage}', getDamageString());
        },
        differentVehicleAlertBody() {
            const vinYmmFound =
                `${this.selectedVehicle?.vehicle.year} ${this.selectedVehicle?.vehicle.make} ${this.selectedVehicle?.vehicle.model}`;
            const vinYmmExpected =
                `${this.vehicleSelected?.year} ${this.vehicleSelected?.make} ${this.vehicleSelected?.model}`;

            return this.getCmsContent('AlertMatchedDifferentVehicleWidget', 'BodyText')
                .replaceAll('{custom:damage}', getDamageString())
                .replaceAll('{custom:vinYmmFound}', vinYmmFound)
                .replaceAll('{custom:vinYmmExpected}', vinYmmExpected);
        },
        AlertMatchedTwoIdenticalYMMVehicleHeader() {
            return this.getCmsContent(
                'AlertMatchedTwoIdenticalYMMVehicleWidget',
                'HeadlineText'
            ).replaceAll('{custom:damage}', getDamageString());
        },
        AlertMatchedTwoIdenticalYMMVehicleBody() {
            const vinYmmsFound =
                // eslint-disable-next-line max-len
                `${this.selectedVehicle?.vehicle.year} ${this.selectedVehicle?.vehicle.make} ${this.selectedVehicle?.vehicle.model} ${this.selectedVehicle?.vehicle.style}`;
            const vinYmmsExpected =
                `${this.vehicleSelected?.year} ${this.vehicleSelected?.make} ${this.vehicleSelected?.model} ${this.vehicleSelected?.style}`;

            return this.getCmsContent('AlertMatchedTwoIdenticalYMMVehicleWidget', 'BodyText')
                .replaceAll('{custom:damage}', getDamageString())
                .replaceAll('{custom:vinYmmsFound}', vinYmmsFound)
                .replaceAll('{custom:vinYmmsExpected}', vinYmmsExpected);
        },
        questionText() {
            return this.getCmsContent('VehicleConfirmationQuestion', 'QuestionText');
        },
        selectedVehicleVin: {
            get() {
                return this.modelValue;
            },
            set(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);
        },
        // TODO: Duplicate key
        vehicleSelected() {
            return this.vehicleSelected;
        }
    }
};
</script>
<style lang="scss" scoped>
.address-vehicles-question {
    .question-text {
        margin-bottom: 0.5rem;
        & > span {
            text-align: left;
        }
    }
}
#address-vehicles-question-alert p {
    margin-bottom: 0 !important; // Overrides extra margin-bottom on alert body text
}
</style>
