<template>
    <textboxQuestion
        ref="saveProgressInputTextQuestion"
        :cmsWidgetName="cmsWidgetName"
        v-model="value"
        inputId="saveProgressUserInput"
        questionAlignment="center"
        cornerStyle="rounded"
        :displayQuestionText="true"
        isRequired
        @input="validateEmail"
        validationRules="email-address-required|email-address-format" />
</template>

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

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

// Define Validation Rules
defineRule("email-address-required", required(errorMessages.EMAIL_ADDRESS_REQUIRED));
defineRule(
    "email-address-format",
    regex(
        /^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9-]+)\.([a-zA-Z]{2,})$/,
        errorMessages.EMAIL_ADDRESS_FORMAT
    )
);

const EMAIL_REGEX = /[^a-zA-Z0-9_\-.+@]/g;

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