<template>
    <div class="page-container-grouped-styles">
        <siteHeader cmsWidgetName="SiteHeaderWidget" />
        <div class="select-car">
            <div class="select-car-form rounded text-center">
                <vehicleBanner cmsWidgetName="VehicleBannerWidget" displayGenericVehicleImage />
                <siteSubHeader
                    cmsWidgetName="SiteSubHeaderWidget"
                    :hasBackButton="true"
                    :backButtonAccessibleText="backButtonAccessibleText"
                    @click-event="backButtonAction" />
                <div class="fade-on-route-transition">
                    <styleQuestion
                        v-model="selectedStyle"
                        ref="styleQuestion"
                        cmsWidgetName="VehicleStyleQuestion" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
// Components
import styleQuestion from "@/layouts/vehicle-style/style-question/style-question";
import siteHeader from "@/common-components/site-header/site-header";
import siteSubHeader from "@/common-components/site-sub-header/site-sub-header";
import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";

// Supporting files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";

export default {
    name: "vehicle-style",
    data() {
        return {
            selectedStyle: null,
        };
    },

    async beforeRouteEnter(to, from, next) {
        // Call APIs
        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
        const styleQuestionInitialDataPromise = styleQuestion.methods.loadInitialData();

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

        const resultMap = await settleAllPromises(promiseResultMap);
        next((vm) => {
            vm.setCmsContent(resultMap.cmsContent);
            vm.$refs.styleQuestion.initializeComponent(resultMap.styleQuestionInitialData);
        });
    },

    methods: {
        backButtonAction() {
            this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
        },
        arePagePrerequisitesValid() {
            if (this.mainStore.order.vehicle.model) {
                return true;
            }
            return false;
        },
    },

    watch: {
        selectedStyle(style) {
            this.mainStore.updateVehicleStyle( style );
            this.mainStore.setVehicle().then(() => {
                this.$router.navigate(
                    this.navigationScenarios.SELECTED_STYLE,
                    this.$route
                );
            });
        },
    },

    components: {
        styleQuestion,
        siteHeader,
        siteSubHeader,
        vehicleBanner,
    },

    computed: {
        backButtonAccessibleText() 
        {
            return this.getCmsContent(this.cmsWidgetName, "BackButtonAccessibleText")
        }
    }
};
</script>
