<template>
    <div class="phonenumber-question d-flex flex-column">
        <textboxQuestion
            type="text"
            :max-length="12"
            v-model="selectedValue"
            :isRequired="isRequired"
            :validationRules="validationRuleForTextBoxQuestion"
            @input="filterNumber"
            cmsWidgetName="phoneNumberQuestionWidget" />
    </div>
</template>

<script>
import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
//Supporting files
import { errorMessages } from "@/constants/error-messages";
import { required, regex } from "@/helpers/validation-rules";
import { Form, defineRule } from "vee-validate";
import { useField, validate } 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: {
        phoneNumberQuestionWidget() {
            return this.getCmsContent(this.cmsWidgetName, "QuestionText");
        },
        selectedValue: {
            get: function () {
                return this.modelValue;
            },
            set: function (newValue) {
                const formattedNumber = this.formatPhoneNumber(newValue);
                this.$emit("update:modelValue", formattedNumber);
            },
        },
        validationRuleForTextBoxQuestion() {
            if (!this.validationRules || this.validationRules.length === 0) {
                return "phone-number-format";
            } else {
                return this.validationRules + "|phone-number-format";
            }
        },
    },
    methods: {
        formatPhoneNumber(value) {
            // Remove all non-digit characters from the phone number
            let formattedNumber = value.replace(/\D/g, "");

            // Insert hyphens after the first three and the next three digits
            if (formattedNumber.length > 3) {
                formattedNumber = formattedNumber.slice(0, 3) + "-" + formattedNumber.slice(3);
            }
            if (formattedNumber.length > 7) {
                formattedNumber = formattedNumber.slice(0, 7) + "-" + formattedNumber.slice(7);
            }

            // Update the phone number with the formatted version
            return formattedNumber;
        },
        filterNumber(event) {
            const regex = /^(?!1)\d+/;
            const inputValue = event.target.value;
            if (!regex.test(inputValue)) {
                // If the input violates the regex pattern, remove the leading 1
                event.target.value = inputValue.replace(/^1/, "");
            }
        },
    },
    watch: {
        async value(newValue) {
            const result = await validate(newValue, this.validationRules); // do a test validation check, without triggering full validation
            if (result.valid) {
                this.handleChange(newValue); // trigger full validation on this field only
            }
        },
    },
    components: {
        textboxQuestion,
    },
};
</script>

<style lang="scss">
.phonenumber-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>
