<template>
    <div class="phone-number-question d-flex flex-column">
        <textboxQuestion
            ref="phoneNumber"
            type="text"
            :max-length="12"
            v-model="selectedValue"
            :mask="mask"
            :isRequired="isRequired"
            :validationRules="validationRulesForTextBoxQuestion"
            :cmsWidgetName="cmsWidgetName" />
    </div>
</template>

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

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

// Validation
defineRule(
    "phone-number-format",
    regex(/^(?=(?:.*\d){10})(?=(?:.*-){2})[\d-]{12}$/, errorMessages.PHONE_FORMAT)
);

export default {
    name: "phoneNumberQuestion",
    props: {
        cmsWidgetName: String,
        isRequired: Boolean,
        validationRules: String,
        hasError: Boolean,
        centerErrorMessage: Boolean,
        modelValue: String,
    },
    data() {
        return {
            phoneNumber: "",
        };
    },
    computed: {
        selectedValue: {
            get: function () {
                return this.modelValue;
            },
            set: function (newValue) {
                this.$emit("update:modelValue", newValue);
            },
        },
        validationRulesForTextBoxQuestion() {
            if (!this.validationRules || this.validationRules.length === 0) {
                return "phone-number-format";
            } else {
                return this.validationRules + "|phone-number-format";
            }
        },
        mask() {
            return {
                mask: "x##-###-####",
                tokens: {
                    x: {
                        pattern: /[2-9]/,
                    },
                },
            };
        },
    },
    components: {
        textboxQuestion,
    },
};
</script>

<style lang="scss">
.phone-number-question {
    label {
        color: $black;
    }
    input {
        border-radius: 0.5rem;
        border: 1px solid $gray-500;
        height: 48px;
        &:focus {
            box-shadow: 0 0 0 2.5px $blue;
            outline: none;
        }
        &:hover {
            box-shadow: 0 0 0 4px $blue-300;
        }
    }
}
</style>
