<template>
    <textboxQuestion
        ref="zipInputTextQuestion"
        v-model="value"
        :cmsWidgetName="cmsWidgetName"
        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.vue';

// 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',
    components: {
        textboxQuestion
    },
    // TODO: Correct prop def.
    props: {
        modelValue: {
            serviceZipCode: String
        },
        cmsWidgetName: String
    },
    emits: ['update:modelValue'],
    computed: {
        value: {
            get() {
                return this.modelValue;
            },
            set(newValue) {
                this.$emit('update:modelValue', newValue);
            }
        }
    }
};
</script>
