<template>
<div class="page-container-grouped-styles">
    <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
    <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage=false />
    <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
    <div class="fade-on-route-transition sub-container make-tall">
        <h1>Part Questions Page Placeholder</h1>
        <funnel-footer
                cmsWidgetName="FunnelFooterWidget" @back-clicked="backButtonAction"
        />
    </div>
</div>
</template>

<script>
// Components
import funnelHeader from "@/common-components/funnel-header/funnel-header";
import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
import funnelFooter from "@/common-components/funnel-footer/funnel-footer";

// Supporting Files
import {
    fetchCmsContentForPage
} from "@/helpers/cms-content-helper";
import {
    settleAllPromises
} from "@/helpers/layout-helper";
import {
    storeMutations
} from "@/constants/store-mutations";
import {
    storeActions
} from "@/constants/store-actions";
import store from "@/store";
import {
    fmgPageValues
} from "@/router/router-constants/fmgPage-values";

export default {
    name: "part-questions",
    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);

        // Call the "next" function to complete the transition to this page.
        next((vm) => {
            vm.setCmsContent(resultMap.cmsContent);
        });
    },
    methods: {
        backButtonAction() {
            // route to move backwards
            this.$router.navigate(
                this.navigationScenarios.CLICKED_BACK,
                this.$route
            );
        },
        arePagePrerequisitesValid() {
            if (Object.keys(store.getters.pageData(fmgPageValues.PART_QUESTIONS)).length !== 0) {
                console.log("A")
                return true;
            }
            console.log("B")
            return false;
        },
        resetDependentState() {
            // Set
            store.commit(storeMutations.UPDATE_PARTS, null);

            // Invokes
            store.dispatch(storeActions.RESET_PARTS_AND_DEPS);
        },
    },
    data() {},
    components: {
        funnelHeader,
        vehicleBanner,
        funnelSubHeader,
        funnelFooter,
    },
};
</script>
