<template>
    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
        <div class="page-container-grouped-styles">
            <loadingModal ref="loadingModal" />
            <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
            <vehicleBanner cmsWidgetName="VehicleBannerWidget" />
            <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
            <div class="fade-on-route-transition sub-container make-tall">
                <div v-if="!skipVinLookup">
                    <alert
                        class="vinLookupMethodHeading"
                        cmsWidgetName="AlertVinLookupQuestion"
                        alertClass="" />
                    <buttonQuestion
                        cmsWidgetName="VinLookupMethod"
                        :answers="answersFromCms"
                        groupName="vinLookupMethodOption"
                        buttonTypeString="listButton"
                        v-model="selectedVinLookupMethod"
                        isRequired
                        validationRules="option-required" />
                </div>
                <div v-else>
                    <alert
                        class="my-4"
                        :cmsWidgetName="alertInfo"
                        alertClass="alert-info"
                        v-bind:isDismissible="false" />
                    <div class="row my-2">
                        <div class="col">
                            <textboxQuestion
                                cmsWidgetName="ServiceZipQuestionWidget"
                                v-model="serviceZipCode"
                                inputId="serviceZipCode"
                                mask="#####"
                                isRequired
                                disableAutoFill
                                validationRules="zip-required|zip-format" />
                        </div>
                    </div>
                    <div class="row mt-2">
                        <div class="col">
                            <textboxQuestion
                                cmsWidgetName="EmailAddressQuestionWidget"
                                v-model="emailAddress"
                                inputId="emailAddress"
                                isRequired
                                disableAutoFill
                                validationRules="email-address-required|email-address-format" />
                        </div>
                    </div>
                    <div class="row mb-2">
                        <div class="col">
                            <textBlock
                                cmsWidgetName="QuoteEmailTextBlockWidget"
                                typeStyle="caption" />
                        </div>
                    </div>
                    <alert
                        ref="alertInvalidZip"
                        v-if="displayInvalidZipAlert"
                        class="my-4"
                        cmsWidgetName="AlertInvalidZipWidget"
                        alertClass="alert-danger"
                        v-bind:isDismissible="false" />
                    <alert
                        class="my-4"
                        :manualHeadline="AlertNonServiceableZipHeader"
                        :manualCopy="AlertNonServiceableZipBody"
                        v-model="customAlertData"
                        v-if="displayNonServiceableZipAlert"
                        alertClass="alert-danger" />
                </div>
                <funnel-footer
                    cmsWidgetName="FunnelFooterWidget"
                    ref="funnelFooter"
                    :isForwardActionDisabled="!meta.valid"
                    @back-clicked="backButtonAction"
                    @ForwardClicked="forwardButtonAction" />
            </div>
        </div>
    </Form>
</template>

<script>
// Components
import funnelHeader from "@/common-components/funnel-header/funnel-header";
import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
import buttonQuestion from "@/common-components/button-question/button-question";
import alert from "@/ux-components/alert/alert";
import textboxQuestion from "@/common-components/textbox-question/textbox-question";
import textBlock from "@/common-components/text-block/text-block";
import loadingModal from "@/common-components/loading-modal/loading-modal.vue";

//Supporting Files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
import { required, regex } from "@/helpers/validation-rules";
import { errorMessages } from "@/constants/error-messages";
import { Form, defineRule } from "vee-validate";
import store from "@/store";
import { storeActions } from "@/constants/store-actions";
import { vinLookupMethodSelections } from "@/constants/vin-lookup-method-selections.js";
import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";

// Define Validation Rules
defineRule("zip-required", required(errorMessages.SERVICE_ZIP_REQUIRED));
defineRule("zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.SERVICE_ZIP_FORMAT));
defineRule("email-address-required", required(errorMessages.EMAIL_ADDRESS_REQUIRED));
defineRule(
    "email-address-format",
    regex(
        /^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9_\-.]+)\.([a-zA-Z]{2,})$/,
        errorMessages.EMAIL_ADDRESS_FORMAT
    )
);
defineRule("option-required", required(errorMessages.OPTION_REQUIRED));

export default {
    name: "estimate",
    data() {
        return {
            selectedVinLookupMethod: null,
            serviceZipCode: this.getZipFromStore(),
            emailAddress: this.getEmailFromStore(),
            displayInvalidZipAlert: false,
            displayNonServiceableZipAlert: false,
            isVinOptionalVehicle: false,
        };
    },

    async beforeRouteEnter(to, from, next) {
        //Call APIs
        const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);

        //Settle promises and get results
        const promiseResultMap = [
            {
                resultKey: "cmsContent",
                promise: cmsContentPromise,
            },
        ];

        const resultMap = await settleAllPromises(promiseResultMap);
        const isVinOptionalVehicle = await store.dispatch(storeActions.IS_VIN_OPTIONAL_VEHICLE);

        next((vm) => {
            vm.isVinOptionalVehicle = isVinOptionalVehicle;
            if (resultMap.cmsContent.FunnelFooterWidget.ForwardButtonText.includes("|")) {
                const forwardTextOption =
                    resultMap.cmsContent.FunnelFooterWidget.ForwardButtonText.split("|");
                if (store.getters.damage.isRepair || vm.isVinOptionalVehicle) {
                    resultMap.cmsContent.FunnelFooterWidget.ForwardButtonText =
                        forwardTextOption[1];
                } else {
                    resultMap.cmsContent.FunnelFooterWidget.ForwardButtonText =
                        forwardTextOption[0];
                }
            }

            vm.setCmsContent(resultMap.cmsContent);
        });
    },
    methods: {
        getZipFromStore() {
            return store.getters.order.serviceLocation.zipCode;
        },
        getEmailFromStore() {
            return store.getters.order.customer.emailAddress;
        },
        arePagePrerequisitesValid() {
            return store.getters.damage.isRepair || store.getters.damage.glassToReplace?.length > 0;
        },
        backButtonAction() {
            // route to move backwards
            this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
        },
        async forwardButtonAction() {
            if (this.skipVinLookup) {
                const zipCodeData = await this.getZipCodeData(this.serviceZipCode);

                await this.dispatchStoreAction(storeActions.SAVE_EMAIL, this.emailAddress, false);
                await this.dispatchStoreAction(
                    storeActions.SAVE_SERVICE_LOCATION,
                    {
                        zipCode: this.serviceZipCode,
                        state: zipCodeData.state,
                    },
                    false
                );

                if (!zipCodeData.isValid) {
                    this.displayInvalidZipAlert = true;
                    return this.$refs.funnelFooter.removeLoader();
                }
                this.displayInvalidZipAlert = false;

                if (!zipCodeData.isServiceable) {
                    this.displayNonServiceableZipAlert = true;
                    return this.$refs.funnelFooter.removeLoader();
                }
                this.displayNonServiceableZipAlert = false;

                const payment = this.$store.getters.payment;
                // TODO KO If coverageStatus is null, they haven't gone to heritage yet... I think
                if (payment.isInsurance && payment.insuranceCoverage.coverageStatus) {
                    navigateToHeritageFunnel({ loadingModal: this.$refs.loadingModal });
                } else {
                    return this.$router.navigateWithSaving(
                        this.navigationScenarios.CLICKED_FORWARD_WITH_NO_QUESTIONS,
                        this.$route
                    );
                }
            }

            if (this.selectedVinLookupMethod === vinLookupMethodSelections.MANUALVIN) {
                await this.dispatchStoreAction(storeActions.CLEAR_VIN);
                return this.$router.navigateWithSaving(
                    this.navigationScenarios.SELECTED_MANUAL_VIN,
                    this.$route
                );
            }
            if (this.selectedVinLookupMethod === vinLookupMethodSelections.LICENSEPLATE) {
                return this.$router.navigateWithSaving(
                    this.navigationScenarios.SELECTED_LICENSE_PLATE,
                    this.$route
                );
            }
            if (this.selectedVinLookupMethod === vinLookupMethodSelections.HOMEADDRESS) {
                return this.$router.navigateWithSaving(
                    this.navigationScenarios.SELECTED_HOME_ADDRESS,
                    this.$route
                );
            }
        },
    },
    computed: {
        AlertNonServiceableZipHeader() {
            return this.getCmsContent("AlertNonServiceableZipWidget", "HeadlineText").replaceAll(
                "{custom:serviceZip}",
                this.serviceZipCode
            );
        },
        AlertNonServiceableZipBody() {
            return this.getCmsContent("AlertNonServiceableZipWidget", "BodyText");
        },
        questionText() {
            return this.getCmsContent("VinLookupMethod", "QuestionText");
        },
        answersFromCms() {
            return this.getCmsContent("VinLookupMethod", "Answers");
        },
        isRepair() {
            return store.getters.damage.isRepair;
        },
        skipVinLookup() {
            return this.isRepair || this.isVinOptionalVehicle;
        },
        alertInfo() {
            return this.isVinOptionalVehicle && !this.isRepair
                ? "AlertQuoteVinOptional"
                : "AlertQuoteReady";
        },
    },
    watch: {
        serviceZipCode() {
            this.displayNonServiceableZipAlert = false;
        },
    },
    components: {
        funnelHeader,
        vehicleBanner,
        funnelSubHeader,
        funnelFooter,
        buttonQuestion,
        Form,
        alert,
        textboxQuestion,
        textBlock,
        loadingModal,
    },
};
</script>

<style lang="scss">
.vinLookupMethodHeading p {
    font-size: 1rem;
    font-weight: 500;
    color: $black;
}
div .current_car_info-text {
    padding-bottom: 16px;
}
</style>
