<template>
  <Form
    @submit="onSubmit"
    @invalidSubmit="onInvalidSubmit"
    v-slot="{ meta }"
  >
    <div class="page-container-grouped-styles overflow-auto">
      <siteHeader
        cmsWidgetName="SiteHeaderWidget"
      />
      <vehicleBanner
        cmsWidgetName="VehicleBannerWidget"
        :displayGenericVehicleImage="false"
      />
      <siteSubHeader
        cmsWidgetName="SiteSubHeaderWidget"
      />
      <div class="fade-on-route-transition sub-container make-tall mt-5">
        <p>Placeholder for capability-questions page</p>

        <siteFooter
          cmsWidgetName="SiteFooterWidget"
          :isForwardActionDisabled="!meta.valid"
          @backClicked="backButtonAction"
          @forwardClicked="forwardButtonAction"
          ref="siteFooter"
        />
      </div>
    </div>
  </Form>
</template>
<script>
// Import Supporting Files
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
import { settleAllPromises } from '@/helpers/layout-helper';

// Import Component
import baseFormMixin from '@/mixins/base-form-mixin';
import { Form } from 'vee-validate';
import siteFooter from '@/common-components/site-footer/site-footer.vue';
import siteHeader from '@/common-components/site-header/site-header.vue';
import siteSubHeader from '@/common-components/site-sub-header/site-sub-header.vue';
import vehicleBanner from '@/common-components/vehicle-banner/vehicle-banner.vue';

export default {
  name: 'capability-questions',
  mixins: [baseFormMixin],
  components: {
    siteFooter,
    siteHeader,
    siteSubHeader,
    Form,
    vehicleBanner,    
  },  
  data() {
    return {};
  },  
  async beforeRouteEnter(to, from, next) {
    const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);

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

    const resultMap = await settleAllPromises(promiseResultMap);

    next((vm) => {
      vm.setCmsContent(resultMap.cmsContent);
    });
  },
  methods: {
    arePagePrerequisiteValid() {
      return true;
    },
    backButtonAction() {
      /**
       * this.navigationScenarios comes from base-mixin
       */
      this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
    },
    async forwardButtonAction() {},    
    resetDependentState() {},
  },
};
</script>
