<template>
    <textboxQuestion
        ref="zipInputTextQuestion"
        :cmsWidgetName="cmsWidgetName"
        v-model="value"
        inputId="serviceZipCode"
        questionAlignment="center"
        cornerStyle="rounded"
        mask="#####"
        :displayQuestionText="false"
        isRequired
        validationRules="zip-required|zip-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("zip-required", required(errorMessages.SERVICE_ZIP_REQUIRED));
defineRule("zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.SERVICE_ZIP_FORMAT));

export default {
    name: "service-zip-question",
    props: {
        modelValue: {
            serviceZipCode: String,
        },
        cmsWidgetName: String,
    },
    computed: {
        value: {
            get: function () {
                return this.modelValue;
            },
            set: function (newValue) {
                this.$emit("update:modelValue", newValue);
            },
        },
    },
    components: {
        textboxQuestion,
    },
};
</script>
