<template>
  <alert
    alertClass="alert-warning"
    cmsWidgetName="AlertMatchedDifferentVehicleWidget"
    :manualCopy="body"
    :manualHeadline="header"
    aria-label="vehicle-not-matched-alert" />
</template>
<script>
import { getDamageString } from '@/helpers/damage-helper';

import alert from '@/ux-components/alert/alert.vue';

export default {
    name: 'vehicle-not-matched-alert',
    components: {
        alert
    },
    inject: ['vehicleFromLookup'],
    computed: {
        header() {
            return (
                this.getCmsContent('AlertMatchedDifferentVehicleWidget', 'HeadlineText')
                    .replaceAll('{custom:damage}', getDamageString())
            );
        },
        body() {
            let year = '';
            let make = '';
            let model = '';

            if (this.vehicleFromLookup) {
                year = this.vehicleFromLookup.year;
                make = this.vehicleFromLookup.make;
                model = this.vehicleFromLookup.model;
            }

            return (
                this.getCmsContent('AlertMatchedDifferentVehicleWidget', 'BodyText')
                    .replaceAll('{custom:damage}', getDamageString())
                    .replaceAll('{custom:vinlookupYear}', year)
                    .replaceAll('{custom:vinlookupMake}', make)
                    .replaceAll('{custom:vinlookupModel}', model)
            );
        }
    }
};
</script>
