<template>
    <modal
        :ref="modalName"
        :modalPosition="modalPositions.center"
        :headerText="headerText"
        :footerButtonText="footerButtonText"
        :onModalClosedCallback="resetFormValues"
        class="contact-details-drawer"
        @isModalOpened="setModalStatus"
        @footerButtonEvent="clickFooterButtonEvent">
        <template v-if="isModalOpened">
            <div class="row">
                <textboxQuestion
                    class="col"
                    ref="firstNameQuestion"
                    v-model="firstName"
                    inputId="firstName"
                    :cmsWidgetName="widget.firstNameQuestion"
                    isRequired
                    :validationRules="rules.firstName" />
                <textboxQuestion
                    class="col"
                    ref="lastNameQuestion"
                    v-model="lastName"
                    inputId="lastName"
                    :cmsWidgetName="widget.lastNameQuestion"
                    isRequired
                    :validationRules="rules.lastName" />
            </div>
            <textboxQuestion
                ref="emailQuestion"
                v-model="emailAddress"
                inputId="emailAddress"
                :cmsWidgetName="widget.emailQuestion"
                isRequired
                :validationRules="rules.emailAddress" />
            <textboxQuestion
                ref="phoneNumberQuestion"
                v-model="phoneNumber"
                inputId="phoneNumber"
                :cmsWidgetName="widget.phoneNumberQuestion"
                isRequired
                :mask="phoneMask"
                disableAutoFill
                :validationRules="rules.phoneNumber" />
            <textboxQuestion
                ref="extensionQuestion"
                v-model="extension"
                inputId="extension"
                :cmsWidgetName="widget.extensionQuestion"
                disableAutoFill
                maxLength="5"
                :validationRules="rules.extension" />
        </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';
import globalRules from '@/constants/global-rules.js';
import MaskaFormattedMasks from '@/constants/maska-masks';
import widgetFields from '@/constants/cms-widget-fields.js';
import { modalPositions } from '@/constants/component-variants';

export default {
    name: 'contact-details-drawer',
    components: {
        modal,
        textboxQuestion
    },
    emits: ['update-contact-details'],
    data() {
        const { firstName,
            lastName,
            emailAddress,
            servicePhone,
            extension } = useMainStore().contactInfo;
        return {
            isModalOpened: false,
            firstName,
            lastName,
            emailAddress,
            phoneNumber: servicePhone,
            extension: extension,
            widget: {
                title: 'ContactDetailsDrawerHeaderWidget',
                firstNameQuestion: 'FirstNameQuestionWidget',
                lastNameQuestion: 'LastNameQuestionWidget',
                emailQuestion: 'EmailQuestionWidget',
                phoneNumberQuestion: 'PhoneNumberQuestionWidget',
                extensionQuestion: 'ExtensionQuestionWidget',
                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}`,
                extension: `${globalRules.EXTENSION_FORMAT}`
            },
            modalPositions
        };
    },
    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
            };
            this.mainStore.updateContactInfo(contactInfo);
            this.mainStore.updatePhoneNumbers({
                home: this.phoneNumber,
                service: this.phoneNumber,
                extension: this.extension
            });
            this.$emit('update-contact-details');
        },
        resetFormValues() {
            const { firstName,
                lastName,
                emailAddress,
                servicePhone,
                extension } = this.mainStore.contactInfo;
            this.firstName = firstName;
            this.lastName = lastName;
            this.emailAddress = emailAddress;
            this.phoneNumber = servicePhone;
            this.extension = extension;
        },
        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;
    }
    .textbox-question {
        margin-bottom: 1.25rem;
        :deep(label:has(b)) {
            font-weight: $font-weight-normal;
            b {
                font-weight: 600;
            }
        }
    }
}
</style>
