<template>
    <addressQuestions
        ref="addressQuestions"
        v-model="customerModel.addressQuestions" />
    <div class="row">
        <div class="col">
            <textboxQuestion
                ref="firstName"
                v-model="customerModel.firstName"
                cmsWidgetName="FirstNameQuestionWidget"
                inputId="08497a2efd9a4a73a70360ab47b4838d"
                disableAutoFill
                :validationRules="rules.firstName" />
        </div>
    </div>
    <div class="row">
        <div class="col">
            <textboxQuestion
                ref="lastName"
                v-model="customerModel.lastName"
                cmsWidgetName="LastNameQuestionWidget"
                inputId="0030e56a57e74a4ab92de7fb8e97fec5"
                disableAutoFill
                :validationRules="rules.lastName" />
        </div>
    </div>
</template>

<script>
import addressQuestions from '@/iss-components/address-questions/address-questions.vue';
import textboxQuestion from '@/digital-components/textbox-question/textbox-question.vue';
import globalRules from '@/constants/global-rules';

export default {
    name: 'customer-questions',
    components: {
        addressQuestions,
        textboxQuestion
    }, // The component emits an event
    props: {
        modelValue: {
            type: Object,
            default: () => ({
                customerQuestions: {
                    addressQuestions: {
                        streetAddress: '',
                        city: '',
                        state: '',
                        zipCode: ''
                    },
                    firstName: '',
                    lastName: ''
                }
            })
        },
        validationRules: String
    },
    emits: ['update:modelValue'],
    data() {
        return {
            rules: {
                firstName: globalRules.FIRST_NAME_REQUIRED,
                lastName: globalRules.LAST_NAME_REQUIRED
            }
        };
    },
    computed: {
        customerModel: {
            get() {
                return this.modelValue;
            },
            set(newValue) {
                this.$emit('update:modelValue', newValue);
            }
        }
    }
};
</script>
<style lang="scss" scoped>
.textbox-question {
    margin-bottom: 1.25rem;
}
</style>
