<template>
    <div class="customer-questions">
        <addressQuestions ref="addressQuestions" v-model="customerModel.addressQuestions" />
        <div class="row mb-4">
            <div class="col">
                <textboxQuestion
                    cmsWidgetName="FirstNameQuestionWidget"
                    v-model="customerModel.firstName"
                    ref="firstName"
                    customInputId="firstName"
                    validationRules="first-name-required"
                    autocomplete="given-name" />
            </div>
        </div>
        <div class="row mb-4">
            <div class="col">
                <textboxQuestion
                    cmsWidgetName="LastNameQuestionWidget"
                    v-model="customerModel.lastName"
                    ref="lastName"
                    customInputId="lastName"
                    validationRules="last-name-required"
                    autocomplete="family-name" />
            </div>
        </div>
        <div class="row mt-4">
            <div class="col">
                <textboxQuestion
                    cmsWidgetName="EmailAddressQuestionWidget"
                    v-model="customerModel.emailOrSms"
                    ref="emailAddress"
                    customInputId="emailOrSms"
                    :isRequired="!isEmailOptional"
                    :validationRules="EmailOrSmsvalidationRules"
                    :addOptionalText="isEmailOptional"
                    autocomplete="email" />
            </div>
        </div>
        <div class="row mb-0">
            <div class="col">
                <textBlock cmsWidgetName="QuoteEmailTextBlockWidget" typeStyle="caption" />
            </div>
        </div>
    </div>
</template>

<script>
import addressQuestions from "@/fmg-components/address-questions/address-questions";
import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
import { defineRule } from "vee-validate";
import { required } from "@/helpers/validation-rules";
import { regex } from "@/helpers/validation-rules";
import { errorMessages } from "@/constants/error-messages";
import textBlock from "@/digital-components/text-block/text-block";

// DEFINE VALIDATION RULES
defineRule("first-name-required", required(errorMessages.FIRST_NAME_REQUIRED));
defineRule("last-name-required", required(errorMessages.LAST_NAME_REQUIRED));
defineRule("email-sms-required", required(errorMessages.EMAIL_SMS_REQUIRED));
defineRule(
    "email-sms-format",
    regex(
        /^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9-]+)\.([a-zA-Z]{2,})$|^\(?(\d{3})\)?[-. ]?(\d{3})[-. ]?(\d{4})$/,
        errorMessages.EMAIL_SMS_FORMAT
    )
);

export default {
    name: "customer-questions",
    emits: ["update:modelValue"], // The component emits an event
    props: {
        modelValue: {
            type: Object,
            default: () => ({
                customerQuestions: {
                    addressQuestions: {
                        streetAddress: "",
                        city: "",
                        state: "",
                        zipCode: "",
                    },
                    firstName: "",
                    lastName: "",
                    emailOrSms: "",
                },
            }),
        },
        validationRules: String,
        isEmailOptional: Boolean,
    },
    computed: {
        customerModel: {
            get: function () {
                return this.modelValue;
            },
            set: function (newValue) {
                this.$emit("update:modelValue", newValue);
            },
        },
    },
    components: {
        addressQuestions,
        textboxQuestion,
        textBlock,
    },
};
</script>
