<template>
    <textboxQuestion
        ref="promoInputTextQuestion"
        :cmsWidgetName="cmsWidgetName"
        v-model="value"
        inputId="promoCode"
        questionAlignment="center"
        cornerStyle="rounded"
        :displayQuestionText="false"
        isRequired
        @input="validateAlphanumeric"
        validationRules="promo-required" />
</template>

<script>
import textboxQuestion from "@/digital-components/textbox-question/textbox-question";

//Supporting Files
import { defineRule } from "vee-validate";
import { required } from "@/helpers/validation-rules";
import { errorMessages } from "@/constants/error-messages";

// Define Validation Rules
defineRule("promo-required", required(errorMessages.PROMO_REQUIRED));

const ALPHANUMERIC_REGEX = /[^a-zA-Z0-9]/g;

export default {
    name: "promo-question",
    props: {
        modelValue: String,
        cmsWidgetName: String,
    },
    computed: {
        value: {
            get: function () {
                return this.modelValue;
            },
            set: function (newValue) {
                this.$emit("update:modelValue", newValue);
            },
        },
    },
    methods: {
        validateAlphanumeric() {
            setTimeout(() => {
                this.value = this.value.replace(ALPHANUMERIC_REGEX, "");
            });
        },
    },
    components: {
        textboxQuestion,
    },
};
</script>
