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

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

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

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

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