<template>
    <Form
        ref="contact-details-form"
        v-slot="{ meta }"
        @submit="onSubmit"
        @invalidSubmit="onInvalidSubmit">
        <div class="fade-on-route-transition">
            <div class="justify-content-center">
                <siteHeader
                    ref="siteHeader"
                    :cmsWidgetName="widget.siteHeader" />
            </div>
            <div class="iss-heritage-container-width">
                <div class="contact-details-container iss-heritage-content-container-width">
                    <siteSubHeader
                        id="sub-header"
                        ref="siteSubHeader"
                        class="mt-4"
                        :cmsWidgetName="widget.siteSubHeader" />
                    <textboxQuestion
                        ref="firstNameQuestion"
                        v-model="firstName"
                        class="mt-5"
                        inputId="firstName"
                        :cmsWidgetName="widget.firstNameQuestion"
                        isRequired
                        :validationRules="rules.firstName" />
                    <textboxQuestion
                        ref="lastNameQuestion"
                        v-model="lastName"
                        class="mt-5"
                        inputId="lastName"
                        :cmsWidgetName="widget.lastNameQuestion"
                        isRequired
                        :validationRules="rules.lastName" />
                    <textboxQuestion
                        ref="emailQuestion"
                        v-model="emailAddress"
                        class="mt-5"
                        inputId="emailAddress"
                        :cmsWidgetName="widget.emailQuestion"
                        isRequired
                        :validationRules="rules.emailAddress" />
                    <textboxQuestion
                        ref="phoneNumberQuestion"
                        v-model="phoneNumber"
                        class="mt-5"
                        inputId="phoneNumber"
                        :cmsWidgetName="widget.phoneNumberQuestion"
                        isRequired
                        :mask="phoneMask"
                        :validationRules="rules.phoneNumber" />
                    <checkbox
                        ref="requestTextUpdatesCheckbox"
                        v-model="requestTextUpdates"
                        :isChecked="requestTextUpdates"
                        class="mt-3"
                        checkboxName="requestTextUpdates"
                        buttonID="requestTextUpdates"
                        :checkboxLabel="requestTextUpdatesCheckboxText" />
                    <textareaQuestion
                        ref="notesQuestion"
                        v-model="notesForTechnician"
                        class="mt-5"
                        inputId="technicianNotes"
                        :isDisabled="false"
                        :isRequired="false"
                        :cmsWidgetName="widget.notesQuestion"
                        maxLength="250"
                        :inputRows="4" />
                    <p
                        ref="disclaimerText"
                        class="caption dark-gray mt-5">
                        {{ textUpdateDisclaimerText }} I also agree to
                        Safelite's
                        <textLink
                            ref="privacyPolicyLink"
                            class="normal-line-height"
                            linkType="newWindowLink"
                            text="Privacy Policy"
                            href="//www.safelite.com/privacy-center" />
                        and
                        <textLink
                            ref="termsOfUseLink"
                            class="normal-line-height"
                            linkType="newWindowLink"
                            text="Terms of Use"
                            href="//www.safelite.com/terms-of-use" />.
                    </p>
                    <siteFooter
                        ref="siteFooter"
                        class="my-5"
                        :cmsWidgetName="widget.siteFooter"
                        :isForwardActionDisabled="!meta.valid"
                        @forwardClicked="forwardButtonAction"
                        @backClicked="navigateBack" />
                </div>
            </div>
        </div>
    </Form>
</template>
<script>
// Components
import siteHeader from '@/iss-components/site-header/site-header.vue';
import siteFooter from '@/iss-components/site-footer/site-footer.vue';
import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
import textboxQuestion from '@/digital-components/textbox-question/textbox-question.vue';
import checkbox from '@/ux-components/checkbox/checkbox.vue';
import textareaQuestion from '@/digital-components/textarea-question/textarea-question.vue';
import textLink from '@/ux-components/text-link/text-link.vue';

// Supporting files
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper.js';
import { Form } from 'vee-validate';
import BaseFormMixin from '@/mixins/base-form-mixin.js';
import { useMainStore } from '@/store/index.js';
import globalRules from '@/constants/global-rules.js';
import MaskaFormattedMasks from '@/constants/maska-masks';

export default {
    name: 'contact-details',
    components: {
        siteHeader,
        siteSubHeader,
        textboxQuestion,
        checkbox,
        textareaQuestion,
        siteFooter,
        // eslint-disable-next-line vue/no-reserved-component-names
        Form,
        textLink
    },
    mixins: [BaseFormMixin],
    async beforeRouteEnter(to, from, next) {
        const cmsContent = await fetchCmsContentForPage(to.query.issPage);

        next((vm) => {
            vm.setCmsContent(cmsContent);
        });
    },
    data() {
        const {
            firstName,
            lastName,
            emailAddress,
            servicePhone,
            requestTextUpdates,
            notesForTechnician
        } = useMainStore().contactInfo;
        return {
            firstName,
            lastName,
            emailAddress,
            phoneNumber: servicePhone,
            requestTextUpdates,
            notesForTechnician,
            widget: {
                siteHeader: 'SiteHeaderWidget',
                siteSubHeader: 'SiteSubHeaderWidget',
                firstNameQuestion: 'FirstNameQuestionWidget',
                lastNameQuestion: 'LastNameQuestionWidget',
                emailQuestion: 'EmailQuestionWidget',
                phoneNumberQuestion: 'PhoneNumberQuestionWidget',
                requestTextUpdates: 'TextContentWidget',
                notesQuestion: 'NotesQuestionWidget',
                disclaimer: 'TextUpdateDisclaimerWidget',
                siteFooter: 'SiteFooterWidget'
            },
            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: {
        /**
         * @returns {string} Returns the CMS text associated with the "get text updates" checkbox.
         */
        requestTextUpdatesCheckboxText() {
            return `${this.getCmsContent(
                this.widget.requestTextUpdates,
                'Text'
            )}*`;
        },
        /**
         * @returns {string} Returns the CMS text associated with the "get text updates" checkbox.
         */
        textUpdateDisclaimerText() {
            return `*${this.getCmsContent(this.widget.disclaimer, 'Text')}`;
        },
        phoneMask() {
            return MaskaFormattedMasks.PHONE_NUMBER;
        }
    },
    methods: {
        /**
         * @summary Steps to perform when forward button clicked.
         */
        forwardButtonAction() {
            const contactInfo = {
                firstName: this.firstName,
                lastName: this.lastName,
                emailAddress: this.emailAddress,
                requestTextUpdates: this.requestTextUpdates,
                notesForTechnician: this.notesForTechnician
            };
            useMainStore().updateContactInfo(contactInfo);

            if (this.requestTextUpdates) {
                useMainStore().updatePhoneNumbers({
                    service: this.phoneNumber,
                    alternative: this.phoneNumber
                });
            } else {
                useMainStore().updatePhoneNumbers({
                    home: this.phoneNumber,
                    service: this.phoneNumber
                });
            }

            const scenario =
                useMainStore().order.serviceLocation.IsSafeliteProvider
                === false
                    ? this.navigationScenarios
                        .CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP
                    : this.navigationScenarios
                        .CLICKED_FORWARD_WITH_SAFELITE_SHOP;
            this.$router.navigate(scenario, this.$route);
        }
    }
};
</script>

<style lang="scss" scoped>
.iss-heritage-container-width {
    .contact-details-container {
        position: relative;
        min-height: 1px;
        padding-left: .9375rem;
        padding-right: .9375rem;
    }
}

.dark-gray {
    color: $darker-gray;
}

.normal-line-height {
    line-height: normal;
}
</style>
