<template>
    <modal
        :ref="modalName"
        :headerText="headerText"
        :footerButtonText="footerButtonText"
        :onModalClosedCallback="resetFormValues"
        class="contact-details-drawer"
        @isModalOpened="setModalStatus"
        @footerButtonEvent="clickFooterButtonEvent">
        <template v-if="isModalOpened">
            <textboxQuestion
                ref="firstNameQuestion"
                v-model="firstName"
                inputId="firstName"
                :cmsWidgetName="widget.firstNameQuestion"
                isRequired
                :validationRules="rules.firstName" />
            <textboxQuestion
                ref="lastNameQuestion"
                v-model="lastName"
                class="mt-4"
                inputId="lastName"
                :cmsWidgetName="widget.lastNameQuestion"
                isRequired
                :validationRules="rules.lastName" />
            <textboxQuestion
                ref="emailQuestion"
                v-model="emailAddress"
                class="mt-4"
                inputId="emailAddress"
                :cmsWidgetName="widget.emailQuestion"
                isRequired
                :validationRules="rules.emailAddress" />
            <textboxQuestion
                ref="phoneNumberQuestion"
                v-model="phoneNumber"
                class="mt-4"
                inputId="phoneNumber"
                :cmsWidgetName="widget.phoneNumberQuestion"
                isRequired
                :mask="phoneMask"
                disableAutoFill
                :validationRules="rules.phoneNumber" />
        </template>
    </modal>
</template>

<script>
// Components
import modal from '@/digital-components/modal/modal.vue';
import textboxQuestion from '@/digital-components/textbox-question/textbox-question.vue';

// Supporting Files
import { useMainStore } from '@/store/index.js';
import globalRules from '@/constants/global-rules.js';
import MaskaFormattedMasks from '@/constants/maska-masks';
import widgetFields from '@/constants/cms-widget-fields.js';

export default {
    name: 'contact-details-drawer',
    components: {
        modal,
        textboxQuestion
    },
    emits: ['update-contact-details'],
    data() {
        const { firstName,
            lastName,
            emailAddress,
            servicePhone } = useMainStore().contactInfo;
        return {
            isModalOpened: false,
            firstName,
            lastName,
            emailAddress,
            phoneNumber: servicePhone,
            widget: {
                title: 'ContactDetailsDrawerHeaderWidget',
                firstNameQuestion: 'FirstNameQuestionWidget',
                lastNameQuestion: 'LastNameQuestionWidget',
                emailQuestion: 'EmailQuestionWidget',
                phoneNumberQuestion: 'PhoneNumberQuestionWidget',
                drawerFooter: 'ContactDetailsDrawerFooterWidget'
            },
            rules: {
                firstName: globalRules.FIRST_NAME_REQUIRED,
                lastName: globalRules.LAST_NAME_REQUIRED,
                emailAddress: `${globalRules.EMAIL_ADDRESS_REQUIRED}|${globalRules.EMAIL_ADDRESS_FORMAT}`,
                phoneNumber: `${globalRules.PHONE_NUMBER_REQUIRED}|${globalRules.PHONE_NUMBER_FORMAT}`
            }
        };
    },
    computed: {
        modalName() {
            return 'contact-details-modal';
        },
        modal() {
            return this.$refs[this.modalName];
        },
        headerText() {
            return this.getCmsContent(this.widget.title, widgetFields.SUB_HEADER_WIDGET.SUB_HEADER_TEXT);
        },
        footerButtonText() {
            return this.getCmsContent(this.widget.drawerFooter, widgetFields.FOOTER_WIDGET.FORWARD_BUTTON_TEXT);
        },
        phoneMask() {
            return MaskaFormattedMasks.PHONE_NUMBER;
        }
    },
    methods: {
        setModalStatus(isOpened) {
            this.isModalOpened = isOpened;
        },
        clickFooterButtonEvent() {
            this.saveContactDetails();
            this.closeModal();
        },
        saveContactDetails() {
            const contactInfo = {
                firstName: this.firstName,
                lastName: this.lastName,
                emailAddress: this.emailAddress
            };
            useMainStore().updateContactInfo(contactInfo);
            useMainStore().updatePhoneNumbers({
                home: this.phoneNumber,
                service: this.phoneNumber
            });
            this.$emit('update-contact-details');
        },
        resetFormValues() {
            const { firstName,
                lastName,
                emailAddress,
                servicePhone } = useMainStore().contactInfo;
            this.firstName = firstName;
            this.lastName = lastName;
            this.emailAddress = emailAddress;
            this.phoneNumber = servicePhone;
        },
        openModal() {
            this.modal.openModal();
        },
        closeModal() {
            this.modal.closeModal();
        }
    }
};
</script>

<style lang="scss" scoped>

.contact-details-drawer {
    :deep(.modal-title) {
        font-size: $h5-font-size;
        font-weight: $font-weight-normal !important;
    }
}
</style>
