<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
                typeStyle="h5"
                class="mb-5 mt-4 dark-header"
                leftAlignHeader
                cmsWidgetName="FunnelSubHeaderWidget" />

            <div class="fade-on-route-transition sub-container make-tall">
                <div>
                    <cart
                        :damage="damageInfo"
                        :lineItems="lineItems"
                        servicePackageOptionsCmsName="ServicePackageTitle" />

                    <vehicleReview
                        cmsWidgetName="VehicleReviewWidget"
                        :vehicle="vehicleInfo"
                        @edit-clicked="editVehicle" />

                    <hr class="my-0" />

                    <damageReview
                        cmsWidgetName="DamageReviewWidget"
                        damageLocationsWidgetName="DamageLocationsWidget"
                        :damage="damageInfo"
                        @edit-clicked="editDamage" />

                    <hr class="my-0" />

                    <!-- <servicePackageReview
                        ref="servicePackageReview"
                        servicePackageOptionsCmsName="ServicePackageTitle"
                        defaultPackageItemsCmsName="DefaultPackageItemDescriptions"
                        vapsItemsCmsName="VapsItemDescriptions"
                        :damage="damageInfo"
                        :lineItems="lineItems"
                        @edit-clicked="editServicePackage" /> -->

                    <hr class="my-0" />

                    <serviceLocationReview
                        cmsWidgetName="ServiceLocationTitleWidget"
                        :serviceLocation="serviceLocationInfo"
                        @edit-clicked="editServiceLocation" />
                </div>

                <funnel-footer
                    cmsWidgetName="FunnelFooterWidget"
                    :isForwardActionDisabled="!meta.valid"
                    :isBackButtonHidden="shouldHideBackButton"
                    @back-clicked="backButtonAction"
                    @ForwardClicked="forwardButtonAction" />
            </div>
        </div>
    </Form>
</template>

<script>
// Components
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 vehicleReview from "@/layouts/review/review-sections/vehicle-review/vehicle-review";
import damageReview from "@/layouts/review/review-sections/damage-review/damage-review";
import servicePackageReview from "@/layouts/review/review-sections/service-package-review/service-package-review";
import serviceLocationReview from "@/layouts/review/review-sections/service-location-review/service-location-review";
import cart from "@/fmg-components/cart/cart";

import baseMixin from "@/mixins/base-mixin.js";
import vehicleQuestionsMixin from "../../mixins/vehicle-questions-mixin";
import { settleAllPromises } from "@/helpers/layout-helper";
import { storeActions } from "@/constants/store-actions";
import store from "@/store";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { required } from "@/helpers/validation-rules";
import { errorMessages } from "@/constants/error-messages";
import { Form, defineRule } from "vee-validate";
import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
import { applicationConfig } from "@/constants/application-config";

defineRule("option-required", required(errorMessages.OPTION_REQUIRED));

export default {
    name: "paymentMethod",
    async beforeRouteEnter(to, from, next) {
        // Call APIs
        const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
        const wipersPromise = baseMixin.methods.dispatchStoreAction(storeActions.GET_WIPERS);
        const rainDefensePromise = baseMixin.methods.dispatchStoreAction(
            storeActions.GET_RAIN_DEFENSE
        );
        const supportingItemsPromise = baseMixin.methods.dispatchStoreAction(
            storeActions.GET_SUPPORTING_ITEMS
        );

        const promiseResultMap = [
            {
                resultKey: "cmsContent",
                promise: cmsContentPromise,
            },
            {
                resultKey: "wipers",
                promise: wipersPromise,
            },
            {
                resultKey: "rainDefense",
                promise: rainDefensePromise,
            },
            {
                resultKey: "supportingItems",
                promise: supportingItemsPromise,
            },
        ];

        const resultMap = await settleAllPromises(promiseResultMap);
        const clonedGlassParts = store.getters.order.lineItems.glassParts
            ? JSON.parse(JSON.stringify(store.getters.order.lineItems.glassParts))
            : [];
        const availableLineItems = [
            resultMap.rainDefense,
            ...resultMap.supportingItems,
            ...resultMap.wipers,
            ...clonedGlassParts,
        ];

        const pricingResults = await baseMixin.methods.dispatchStoreAction(
            storeActions.PRICE_ORDER_ITEMS_AND_SAVE_SERVER_DATA,
            {
                availableLineItems: availableLineItems,
            },
            false
        );

        // Call the "next" function to complete the transition to this page.
        next((vm) => {
            vm.setCmsContent(resultMap.cmsContent);
            vm.pricedGlassParts = clonedGlassParts;
            vm.supportingItems = resultMap.supportingItems;
            vm.availableLineItems = pricingResults;
            vm.isInsuranceSelected = vm.getDefaultIsInsuranceSelectedValue(vm.availableLineItems);
        });
    },
    data() {
        return {
            isInsuranceSelected: null,
            selectedVaps: null,
            availableLineItems: null,
            supportingItems: null,
            pricedGlassParts: null,
        };
    },
    methods: {
        arePagePrerequisitesValid() {
            return (
                store.getters.order.serviceLocation.zipCode &&
                store.getters.order.serviceLocation.zipCodeCtu &&
                (store.getters.order.damage.isRepair ||
                    (store.getters.order.lineItems?.glassParts != null &&
                        store.getters.order.lineItems.glassParts.length > 0)) &&
                store.getters.order.referralNumber?.length !== 6
            );
        },
        getDefaultIsInsuranceSelectedValue(availableLineItems) {
            // Override if coming back from QuoteDetails. Remove override after Quote release
            const isInsuranceOverrideValue = this.$route.query?.isInsurance;

            const defaultIsInsuranceSelectedValue = this.$store.getters.order.payment.isInsurance;
            if (isInsuranceOverrideValue != null) {
                return isInsuranceOverrideValue == "true";
            } else if (defaultIsInsuranceSelectedValue != null) {
                return defaultIsInsuranceSelectedValue;
            } else {
                return availableLineItems
                    ? baseMixin.methods.getTierOnePackagePrice(
                          baseMixin.methods.filterOutFees(availableLineItems)
                      ) > 300
                    : null;
            }
        },
        vapsItemsSelectedAction(vapsItemsSelected) {
            this.selectedVaps = vapsItemsSelected;
        },
        backButtonAction() {
            vehicleQuestionsMixin.methods.navigateBack(this);
        },
        forwardButtonAction() {
            this.dispatchStoreAction(
                this.storeActions.SAVE_PAYMENT_TYPE,
                this.isInsuranceSelected,
                false
            );

            if (!this.isInsuranceSelected) {
                this.dispatchStoreAction(
                    this.storeActions.SAVE_PARENT_ACCOUNT_NUMBER,
                    applicationConfig.CASH_PARENT_ACCOUNT_NUMBER,
                    false
                );
            }

            if (
                this.$store.getters.order.payment.parentAccountNumber !=
                applicationConfig.CASH_PARENT_ACCOUNT_NUMBER
            ) {
                this.supportingItems = this.filterOutFees(this.supportingItems);
            }

            if (this.pricedGlassParts.length > 0) {
                this.dispatchStoreAction(
                    this.storeActions.SAVE_GLASS_PART_PRICES,
                    this.pricedGlassParts,
                    false
                );
            }

            this.dispatchStoreAction(
                this.storeActions.SAVE_SUPPORTING_ITEMS,
                this.supportingItems,
                false
            );

            this.dispatchStoreAction(this.storeActions.SAVE_VAPS, this.selectedVaps, false);

            const payment = this.$store.getters.payment;
            if (payment.isInsurance) {
                navigateToHeritageFunnel({ loadingModal: this.$refs.loadingModal });
            } else {
                this.$router.navigateWithSaving(
                    this.navigationScenarios.CLICKED_FORWARD_WITH_CASH,
                    this.$route
                );
            }
        },
    },
    computed: {
        subHeaderTitle() {
            return this.getCmsContent("FunnelSubHeaderWidget", "HeaderText");
        },
        subHeaderBody() {
            return this.getCmsContent("FunnelSubHeaderWidget", "BodyText");
        },
        forwardButtonText() {
            return this.getCmsContent("FunnelFooterWidget", "ForwardButtonText");
        },
        vehicleInfo() {
            return this.$store.getters.vehicle;
        },
        damageInfo() {
            return this.$store.getters.damage;
        },
        lineItems() {
            return this.$store.getters.lineItems;
        },
        serviceLocationInfo() {
            return this.$store.getters.order.serviceLocation;
        },
    },
    components: {
        funnelHeader,
        funnelFooter,
        funnelSubHeader,
        Form,
        loadingModal,
        // servicePackageReview,
        serviceLocationReview,
        vehicleReview,
        damageReview,
        cart,
    },
};
</script>
<style scoped>
.text-block {
    display: block;
}
</style>
