<template>
  <textboxQuestion
    id="vin-question-wrapper"
    v-model="vin"
    cmsWidgetName="VinNumberQuestionWidget"
    disableAutoFill
    inputId="vin-question"
    isRequired
    maxLength="17"
    validationRules="vin-required|vin-format" />
</template>
<script>
// Import Other Supporting File(s)
import { defineRule } from 'vee-validate';
import { regex, required } from '@/helpers/validation-rules';
import errorMessages from '@/constants/error-messages';

// Import Component(s)
import textboxQuestion from '@/digital-components/textbox-question/textbox-question';

defineRule('vin-required', required(errorMessages.VIN_REQUIRED));
defineRule('vin-format', regex(/^[a-hA-Hj-nJ-NpPr-zR-Z0-9]{17}$/, errorMessages.VIN_FORMAT));

export default {
    name: 'vin-question',
    components: {
        textboxQuestion
    },
    props: {
        modelValue: String
    },
    emits: ['update:modelValue'],
    computed: {
        vin: {
            get() {
                return this.modelValue;
            },
            set(newValue) {
                this.$emit('update:modelValue', newValue);
            }
        }
    }
};
</script>
<style>
#vin-question-wrapper .form-test-error {
  /**
  Override extra margin-bottom in the error message in TextboxQuestion
  */
  margin-bottom: 0 !important;
}
</style>
