<template>
    <modal
        :ref="modalName"
        :headerText="headerText"
        :footerButtonText="footerButtonText"
        :onModalClosedCallback="resetFormValues"
        :displayCloseLink="true"
        :closeLinkText="closeLinkText"
        class="contact-details-drawer"
        @isModalOpened="setModalStatus"
        @footerButtonEvent="clickFooterButtonEvent">
        <template v-if="isModalOpened">
            <div class="name-section-label">{{ nameSectionLabel }}</div>
            <div class="row form-group">
                <textboxQuestion
                    class="col-lg-6"
                    ref="firstNameQuestion"
                    v-model="firstName"
                    inputId="firstName"
                    :displayQuestionText="false"
                    :cmsWidgetName="widget.firstNameQuestion"
                    isRequired
                    :validationRules="rules.firstName" />
                <textboxQuestion
                    class="col-lg-6 last-name-question"
                    ref="lastNameQuestion"
                    v-model="lastName"
                    inputId="lastName"
                    :displayQuestionText="false"
                    :cmsWidgetName="widget.lastNameQuestion"
                    isRequired
                    :validationRules="rules.lastName" />
            </div>
            <textboxQuestion
                class="form-group"
                ref="emailQuestion"
                v-model="emailAddress"
                inputId="emailAddress"
                :cmsWidgetName="widget.emailQuestion"
                isRequired
                :validationRules="rules.emailAddress" />
            <textboxQuestion
                class="form-group"
                ref="phoneNumberQuestion"
                v-model="phoneNumber"
                inputId="phoneNumber"
                :cmsWidgetName="widget.phoneNumberQuestion"
                isRequired
                :mask="phoneMask"
                disableAutoFill
                :validationRules="rules.phoneNumber" />
            <textboxQuestion
                class="form-group"
                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';

export default {
    name: 'contact-details-drawer',
    components: {
        modal,
        textboxQuestion
    },
    emits: ['update-contact-details', 'close-without-saving'],
    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.POLICYHOLDER_FIRST_NAME_REQUIRED,
                lastName: globalRules.POLICYHOLDER_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}`
            },
            detailsSaved: false
        };
    },
    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;
        },
        nameSectionLabel() {
            return this.getCmsContent(this.widget.firstNameQuestion, widgetFields.INPUT_QUESTION_WIDGET.QUESTION_TEXT);
        },
        closeLinkText() {
            return this.getCmsContent(this.widget.drawerFooter, widgetFields.FOOTER_WIDGET.BACK_BUTTON_TEXT);
        }
    },
    methods: {
        setModalStatus(isOpened) {
            this.isModalOpened = isOpened;
        },
        clickFooterButtonEvent() {
            this.detailsSaved = true;
            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() {
            if (!this.detailsSaved) {
                this.$emit('close-without-saving');
            }
            const { firstName,
                lastName,
                emailAddress,
                servicePhone,
                extension } = this.mainStore.contactInfo;
            this.firstName = firstName;
            this.lastName = lastName;
            this.emailAddress = emailAddress;
            this.phoneNumber = servicePhone;
            this.extension = extension;
            this.detailsSaved = false;
        },
        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;
    }
    .form-group {
        margin-bottom: 1.25rem;
        align-items: start;
    }
    .name-section-label {
        color: $black;
        font-weight: 600;
        margin-bottom: .25rem;
    }
    .last-name-question {
        @include media-breakpoint-down(lg) {
            margin-top: .625rem;
        }
    }

    :deep(.modal-dialog) {
        .modal-content {
            padding: 1.25rem 1.25rem 0;
            .modal-header {
                padding: 0;

                .modal-title {
                    padding: 0;
                    font-size: 1rem;
                }
            }

            .modal-body {
                padding: 0;
                overflow: hidden;
            }

            .modal-footer {
                display: flex;
                flex-direction: row-reverse;
                justify-content: space-between;
                align-items: flex-start;
                padding: 0rem;

                button {
                    background-color: $heritage-blue-primary;
                    color: $white;
                    font-weight: 600;
                    width: 10.75rem;
                    margin-bottom: 1.25rem;

                    &:hover {
                        background-color: #00559e;
                    }
                }

                a {
                    margin: .5rem 0 0;
                    font-weight: $font-weight-normal;
                }

                @include media-breakpoint-down(lg) {
                    align-items: center;
                    flex-direction: column;

                    button {
                        width: 100%;
                    }
                }
            }
        }
    }
}
</style>
