<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="true"/>
          <siteSubHeader 
            cmsWidgetName="SiteSubHeaderWidget" 
            :hasBackButton="true"
            @click-event="backButtonAction"
          />
          <div class="fade-on-route-transition">
            <makeQuestion 
              class="fade-on-route-transition"
              v-model="selectedMake" 
              ref="makeQuestion" 
              cmsWidgetName="VehicleMakeQuestion" 
            />
          </div>
        </div>
      </div>
    </div>
</template>

<script>
      // Components
    import makeQuestion from "@/layouts/vehicle-make/make-question/make-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";
    import { useMainStore } from "@/store";

    export default {
        name: 'vehicle-make',
        setup()
        {
          const mainStore = useMainStore()

          return {
            mainStore,
          }
        },
        data() {
            return {
                selectedMake: null,
            };
        },

        async beforeRouteEnter(to, from, next) {       
        // Call APIs
        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
        const makeQuestionInitialDataPromise = makeQuestion.methods.loadInitialData();
    
        // Settle promises and get results
        const promiseResultMap = [
            {
            resultKey: "cmsContent",
            promise: cmsContentPromise,
            },
            {
            resultKey: "makeQuestionInitialData",
            promise: makeQuestionInitialDataPromise,
            },
        ];
    
        let resultMap = await settleAllPromises(promiseResultMap);
    
        // Call the "next" function to complete the transition to this page.
        next((vm) => {
            vm.setCmsContent(resultMap.cmsContent);
            vm.$refs.makeQuestion.initializeComponent(
                resultMap.makeQuestionInitialData
            );
        });
        },
        methods: {
          backButtonAction() {
            this.$router.navigate(
              this.navigationScenarios.CLICKED_BACK,
              this.$route
            );
          },
          arePagePrerequisitesValid() {
            if (this.mainStore.order.vehicle.year){
              return true;
            }
            return false;
          },
        },
        components: {
            makeQuestion,
            siteHeader,
            siteSubHeader,
            vehicleBanner,
        },
        watch: {
          selectedMake(make) {
            this.mainStore.updateVehicleMake(make); 
            this.$router.navigate(
              this.navigationScenarios.SELECTED_MAKE,
              this.$route
            );
          },
        },
    };
</script>