<template>
  <div
    id="vin-lookup-alerts-wrapper"
    :class="wrapperCssClass">
    <vehicleNotFoundAlert
      v-if="isVehicleNotFoundVisible" />
    <twoIdenticalYMMVehicleAlert
      v-if="isTwoIdenticalYMMVehicleFoundVisible" />
    <vehicleNotMatchedAlert
      v-else-if="isVehicleNotMatchedVisible" />
    <perfectMatchAlert
      v-else-if="isPerfectMatchVisible" />
    <noServiceAlert
      v-else-if="isNoServiceVisible" />
  </div>
</template>
<script>
import vehicleLookupAlertTypes from '@/constants/vehicle-lookup-alert-types';
import vehicleNotFoundAlert from '@/layouts/vin-lookup/vin-lookup-alerts/vehicle-not-found-alert/vehicle-not-found-alert.vue';
import vehicleNotMatchedAlert from '@/layouts/vin-lookup/vin-lookup-alerts/vehicle-not-matched-alert/vehicle-not-matched-alert.vue';
import twoIdenticalYMMVehicleAlert from
    '@/layouts/vin-lookup/vin-lookup-alerts/two-identical-ymm-vehicle-alert/two-identical-ymm-vehicle-alert.vue';
import perfectMatchAlert from '@/layouts/vin-lookup/vin-lookup-alerts//perfect-match-alert/perfect-match-alert.vue';
import noServiceAlert from './no-service-alert/no-service-alert.vue';

export default {
    name: 'vin-lookup-alerts',
    components: {
        vehicleNotFoundAlert,
        vehicleNotMatchedAlert,
        twoIdenticalYMMVehicleAlert,
        perfectMatchAlert,
        noServiceAlert
    },
    props: {
        activeAlertType: {
            type: String,
            validator(value) {
                const acceptedValues = [null];
                acceptedValues.push(...Object.values(vehicleLookupAlertTypes));
                return acceptedValues.includes(value);
            }
        }
    },
    computed: {
        isVehicleNotFoundVisible() {
            return this.activeAlertType === vehicleLookupAlertTypes.NOT_FOUND;
        },
        isVehicleNotMatchedVisible() {
            return this.activeAlertType === vehicleLookupAlertTypes.NOT_MATCHED;
        },
        isTwoIdenticalYMMVehicleFoundVisible() {
            return this.activeAlertType === vehicleLookupAlertTypes.TWO_IDENTICAL_YMM_MATCHED;
        },
        isPerfectMatchVisible() {
            return this.activeAlertType === vehicleLookupAlertTypes.PERFECT_MATCH;
        },
        isNoServiceVisible() {
            return this.activeAlertType === vehicleLookupAlertTypes.NO_SERVICE;
        },
        wrapperCssClass() {
            return {
                'mb-5': this.activeAlertType !== null
            };
        }
    }
};
</script>
