<template>
    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
        <div class="page-container-grouped-styles">
            <loadingModal ref="loadingModal" />
            <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
            <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-5" />
            <serviceZipModalQuestion
                v-model="serviceZipCodeQuestion"
                ref="serviceZipCodeQuestion"
                :mobileFeePart="mobileFeePart"
                @updated-mobile-fee-part="setMobileFeePart"
                @updated-serviceability="setServiceabilityDetails"
                @updated-contains-military-base="setContainsMilitaryBase"
                linkWidgetName="ServiceZipLinkWidget"
                modalWidgetName="ServiceZipModalWidget"
                :onZipUpdateCallback="reloadShopData" />
            <alert
                ref="alertMilitaryBaseZip"
                class="my-5"
                cmsWidgetName="AlertMilitaryBaseZipWidget"
                v-if="displayMilitaryZipAlert"
                alertClass="alert-warning" />
            <alert
                ref="alertMobileOnly"
                class="my-5"
                cmsWidgetName="AlertMobileOnlyWidget"
                v-if="displayServiceableMobileOnly"
                alertClass="alert-warning" />
            <alert
                ref="alertRecalNoMobile"
                class="my-5"
                cmsWidgetName="AlertRecalNoMobileWidget"
                v-if="displayRecalibrationWarning"
                @text-link-clicked="openModalAction"
                alertClass="alert-warning" />
            <alert
                ref="alertInshopOnly"
                class="my-5"
                cmsWidgetName="AlertInshopOnlyWidget"
                v-if="displayServiceableInshopOnly"
                alertClass="alert-warning" />
            <alert
                ref="alertNoShops"
                class="my-5"
                cmsWidgetName="AlertNoShopsWidget"
                v-if="displayNoShopsAlert"
                alertClass="alert-warning" />
            <appointmentTypeQuestion
                v-model="selectedAppointmentType"
                v-show="!displayNoShopsAlert"
                :isServiceableMobile="isServiceableMobile"
                :isServiceableInshop="isServiceableInshop"
                ref="appointmentTypeQuestion"
                groupName="appointmentTypeQuestion"
                cmsWidgetName="AppointmentTypeQuestionWidget"
                validationRules="option-required" />
            <mobileLocationModalQuestions
                customComponentId="mobileLocationQuestions"
                v-if="selectedAppointmentType === 'Mobile'"
                v-model="mobileLocationQuestions"
                :mobileFeePart="mobileFeePart"
                @updated-mobile-fee-part="setMobileFeePart"
                @updated-serviceability="setServiceabilityDetails"
                @updated-contains-military-base="setContainsMilitaryBase"
                validationRules="mobile-location-required"
                ref="mobileLocationQuestions"
                linkWidgetName="MobileLocationLinkWidget"
                modalWidgetName="MobileLocationModalWidget"
                :onZipUpdateCallback="reloadShopData" />
            <Transition name="fade" mode="out-in">
                <shopQuestion
                    ref="shopQuestion"
                    v-show="isShopQuestionDisplayed"
                    v-model="selectedProviderNumber"
                    @providerSelected="onProviderSelected"
                    :serviceZipCode="zipCode"
                    :selectedAppointmentType="selectedAppointmentType"
                    :isDisplayed="isShopQuestionDisplayed"
                    cmsWidgetName="ShopQuestionWidget" />
            </Transition>
            <contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />
            <funnel-footer
                cmsWidgetName="FunnelFooterWidget"
                ref="funnelFooter"
                :isForwardActionDisabled="!meta.valid || displayNoShopsAlert"
                @back-clicked="backButtonAction"
                @ForwardClicked="forwardButtonAction" />
        </div>
    </Form>
</template>

<script>
// Components
import alert from "@/ux-components/alert/alert";
import serviceZipModalQuestion from "@/layouts/service-location/service-zip-modal-question/service-zip-modal-question";
import mobileLocationModalQuestions from "@/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions";
import appointmentTypeQuestion from "@/layouts/service-location/appointment-type-question/appointment-type-question";
import shopQuestion from "@/layouts/service-location/shop-question/shop-question";

import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer";
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
import { Form } from "vee-validate";
import contentGroupModal from "@/fmg-components/content-group-modal/content-group-modal";

// Supporting files
import baseMixin from "@/mixins/base-mixin.js";

import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
import {
    getPricedMobileFeePart,
    getServiceabilityDetails,
} from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
import store from "@/store";

// Validation
import { defineRule } from "vee-validate";
import { errorMessages } from "@/constants/error-messages";

// DEFINE VALIDATION RULES
defineRule("mobile-location-required", (value) => {
    if (
        value.addressQuestions.streetAddress == "" ||
        value.addressQuestions.city == "" ||
        value.addressQuestions.state == "" ||
        value.addressQuestions.zipCode == "" ||
        value.isVehicleProtected == null
    ) {
        return errorMessages.MOBILE_LOCATION_REQUIRED;
    }
    return true;
});

const defaultProvider = {
    providerNumber: null,
    address: null,
    city: null,
    state: null,
    zip: null,
};

export default {
    name: "service-location",
    data() {
        return {
            streetAddress: this.getServiceAddressFromStore(),
            apartmentNumberOrBusinessName: "",
            city: this.getServiceCityFromStore(),
            state: this.getServiceStateFromStore(),
            zipCode: this.getServiceZipCodeFromStore(),
            isVehicleProtected: null,
            isGlassServiceableInshop: null,
            isRecalibrationServiceableInshop: null,
            isGlassServiceableMobile: null,
            isRecalibrationServiceableMobile: null,
            selectedAppointmentType: this.getSelectedAppointmentType(),
            selectedProvider: this.getSelectedProvider(),
            selectedProviderNumber: this.getSelectedProvider().providerNumber,
            mobileFeePart: null,
            zipContainsMilitaryBase: false,
        };
    },
    async beforeRouteEnter(to, from, next) {
        // Call APIs
        const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);

        const serviceZipCode = store.getters.order.serviceLocation.zipCode;
        const getZipCodeData = baseMixin.methods.getZipCodeData(serviceZipCode);

        const serviceabilityDetailsPromise = getServiceabilityDetails(serviceZipCode);

        const mobileFeePartPromise = getPricedMobileFeePart(serviceZipCode);

        const shopQuestionInitialDataPromise = shopQuestion.methods.loadInitialData(serviceZipCode);

        // Settle promises and get results
        const promiseResultMap = [
            {
                resultKey: "cmsContent",
                promise: cmsContentPromise,
            },
            {
                resultKey: "mobileFeePart",
                promise: mobileFeePartPromise,
            },
            {
                resultKey: "serviceabilityDetails",
                promise: serviceabilityDetailsPromise,
            },
            {
                resultKey: "zipCodeData",
                promise: getZipCodeData,
            },
            {
                resultKey: "shopQuestionInitialData",
                promise: shopQuestionInitialDataPromise,
            },
        ];

        const resultMap = await settleAllPromises(promiseResultMap);

        // Call the "next" function to complete the transition to this page.
        next((vm) => {
            vm.setCmsContent(resultMap.cmsContent);
            vm.setData(
                resultMap.zipCodeData,
                resultMap.serviceabilityDetails,
                resultMap.mobileFeePart
            );
            vm.$refs.shopQuestion.initializeComponent(resultMap.shopQuestionInitialData);
        });
    },
    computed: {
        serviceZipCodeQuestion: {
            get: function () {
                return {
                    state: this.state,
                    zipCode: this.zipCode,
                };
            },
            set: function (newValue) {
                if (newValue.zipCode !== this.zipCode) {
                    this.resetMobileLocation();
                    this.selectedAppointmentType = null;
                    this.selectedProvider = defaultProvider;
                }

                this.state = newValue.state;
                this.zipCode = newValue.zipCode;

                this.$nextTick();
            },
        },
        mobileLocationQuestions: {
            get: function () {
                return {
                    addressQuestions: {
                        streetAddress: this.streetAddress,
                        apartmentNumberOrBusinessName: this.apartmentNumberOrBusinessName,
                        city: this.city,
                        state: this.state,
                        zipCode: this.zipCode,
                    },
                    isVehicleProtected: this.isVehicleProtected,
                };
            },
            set: function (newValue) {
                this.streetAddress = newValue.addressQuestions.streetAddress;
                this.apartmentNumberOrBusinessName =
                    newValue.addressQuestions.apartmentNumberOrBusinessName;
                this.city = newValue.addressQuestions.city;
                this.state = newValue.addressQuestions.state;
                this.zipCode = newValue.addressQuestions.zipCode;
                this.isVehicleProtected = newValue.isVehicleProtected;

                if (newValue.zipCode !== this.zipCode) {
                    if (!this.selectedAppointmentType == "Mobile") {
                        this.selectedAppointmentType = null;
                    }
                    this.selectedProvider = defaultProvider;
                }
            },
        },
        isServiceableMobile() {
            if (this.isRecalibrationServiceableMobile !== null) {
                return this.isGlassServiceableMobile && this.isRecalibrationServiceableMobile;
            } else {
                return this.isGlassServiceableMobile;
            }
        },
        isServiceableInshop() {
            if (this.isRecalibrationServiceableInshop !== null) {
                return this.isGlassServiceableInshop && this.isRecalibrationServiceableInshop;
            } else {
                return this.isGlassServiceableInshop;
            }
        },
        isShopQuestionDisplayed() {
            return (
                this.selectedAppointmentType === "Inshop" ||
                this.selectedAppointmentType === "Dropoff"
            );
        },
        // Specifically check for isRecalibrationServiceableMobile === false, not null or true.
        requiresInshopRecalibration() {
            return (
                this.isServiceableInshop &&
                this.isGlassServiceableMobile &&
                this.isRecalibrationServiceableMobile === false
            );
        },
        displayRecalibrationWarning() {
            return this.requiresInshopRecalibration;
        },
        displayServiceableInshopOnly() {
            return (
                !this.displayRecalibrationWarning &&
                this.isServiceableInshop &&
                !this.isServiceableMobile
            );
        },
        displayMilitaryZipAlert() {
            return this.zipContainsMilitaryBase && this.isServiceableMobile;
        },
        displayServiceableMobileOnly() {
            return this.isServiceableMobile && !this.isServiceableInshop;
        },
        displayNoShopsAlert() {
            return !this.isServiceableInshop && !this.isServiceableMobile;
        },
    },
    methods: {
        arePagePrerequisitesValid() {
            return (
                store.getters.lineItems.supportingItems !== null &&
                store.getters.order.serviceLocation.zipCode !== null &&
                store.getters.payment.isInsurance !== null
            );
        },
        setData(zipCodeData, serviceabilityDetails, mobileFeePart) {
            if (zipCodeData) {
                this.zipContainsMilitaryBase = zipCodeData.containsMilitaryBase;
            }

            if (serviceabilityDetails) {
                this.setServiceabilityDetails(serviceabilityDetails);
            }

            if (mobileFeePart) {
                this.mobileFeePart = mobileFeePart;
            }
        },
        setContainsMilitaryBase(val) {
            if (this.zipContainsMilitaryBase !== val) {
                this.zipContainsMilitaryBase = val;
            }
        },
        getServiceAddressFromStore() {
            return store.getters.order.serviceLocation.address;
        },
        getServiceCityFromStore() {
            return store.getters.order.serviceLocation.city;
        },
        getServiceStateFromStore() {
            return store.getters.order.serviceLocation.state;
        },
        getServiceZipCodeFromStore() {
            return store.getters.order.serviceLocation.zipCode;
        },
        getSelectedAppointmentType() {
            return store.getters.order.serviceLocation.appointmentType;
        },
        getSelectedProvider() {
            return store.getters.order.serviceLocation.provider ?? defaultProvider;
        },
        setMobileFeePart(mobileFeePart) {
            this.mobileFeePart = mobileFeePart;
        },
        resetMobileLocation() {
            this.streetAddress = "";
            this.apartmentNumberOrBusinessName = "";
            this.city = "";

            this.isVehicleProtected = null;
        },
        setServiceabilityDetails(serviceabilityDetails) {
            this.isGlassServiceableInshop = serviceabilityDetails.isGlassServiceableInshop;
            this.isRecalibrationServiceableInshop =
                serviceabilityDetails.isRecalibrationServiceableInshop;
            this.isGlassServiceableMobile = serviceabilityDetails.isGlassServiceableMobile;
            this.isRecalibrationServiceableMobile =
                serviceabilityDetails.isRecalibrationServiceableMobile;
        },
        backButtonAction() {
            this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
        },
        forwardButtonAction() {
            this.$router.navigateWithoutSaving(
                this.navigationScenarios.SELECTED_LOCATION,
                this.$route
            );
        },
        openModalAction(modalName) {
            this.$refs[modalName].openModal();
        },
        async reloadShopData() {
            await this.$refs.shopQuestion.reloadShopData(this.zipCode);
        },
        onProviderSelected(selectedProvider) {
            this.selectedProvider = selectedProvider;
        },
    },
    components: {
        alert,
        serviceZipModalQuestion,
        appointmentTypeQuestion,
        mobileLocationModalQuestions,
        funnelHeader,
        funnelFooter,
        funnelSubHeader,
        Form,
        loadingModal,
        contentGroupModal,
        shopQuestion,
    },
};
</script>

<style lang="scss">
.question-text {
    & > span {
        text-align: center;
    }
}
</style>
