<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">
            <modelQuestion v-model="selectedModel" ref="modelQuestion" cmsWidgetName="VehicleModelQuestion" />
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  // Components
  import modelQuestion from "@/layouts/vehicle-model/model-question/model-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-model",
    data() {
      return {
        selectedModel: null,
      };
    },
    async beforeRouteEnter(to, from, next) {
      // Call APIs
      const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
      const modelQuestionInitialDataPromise =
        modelQuestion.methods.loadInitialData();
  
      // Settle promises and get results
      const promiseResultMap = [
        {
          resultKey: "cmsContent",
          promise: cmsContentPromise,
        },
        {
          resultKey: "modelQuestionInitialData",
          promise: modelQuestionInitialDataPromise,
        },
      ];
  
      const resultMap = await settleAllPromises(promiseResultMap);
  
      // Call the "next" function to complete the transition to this page.
      next((vm) => {
        vm.setCmsContent(resultMap.cmsContent);
        vm.$refs.modelQuestion.initializeComponent(
          resultMap.modelQuestionInitialData
        );
      });
    },
  
    methods: {
        backButtonAction() {
        // route to move backwards
            this.$router.navigate(
            this.navigationScenarios.CLICKED_BACK,
            this.$route
            );
        },
        arePagePrerequisitesValid() 
        {
            if(this.mainStore.order.vehicle.make){
                return true;
            }
            return false;
        },
    },
  
    watch: {
      selectedModel(model) {
        this.mainStore.updateVehicleModel( model );
        this.$router.navigate(
          this.navigationScenarios.SELECTED_MODEL,
          this.$route
        );
      },
    },
  
    components: {
      modelQuestion,
      siteHeader,
      siteSubHeader,
      vehicleBanner,
    },

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