
<template>
  <Form
  @submit="onSubmit"
  @invalid-submit="onInvalidSubmit"
  ref="theForm"
  v-slot="{ meta }"
  >
  <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">
      <textBlock
      cmsWidgetName="paymentServiceOptionsCopy"
      justifyText="center"
      typeStyle="small"
      class="mt-2 mb-5"
      />
      <cashOrInsuranceQuestion
            ref="cashOrInsurance"
            cmsWidgetName="CashOrInsuranceQuestionWidget"
            v-model="isInsurance"
            groupName="CashOrInsuranceQuestion"
          />
      <radioServicePackage/>
      <textBlock
      cmsWidgetName="quoteDisclaimer"
      justifyText="left"
      typeStyle="caption"
      class="mt-4"
      />
      <funnel-footer
      cmsWidgetName="FunnelFooterWidget"
      :isForwardActionDisabled="!meta.valid"
      :isBackButtonHidden=shouldHideBackButton
      @back-clicked="backButtonAction"
      @ForwardClicked="forwardButtonAction"
      />
    </div>
  </div>
</Form>
</template>

<script>
// Components
import funnelHeader from "@/common-components/funnel-header/funnel-header";
import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
import radioServicePackage from "@/ux-components/radio-service-package/radio-service-package";
import cashOrInsuranceQuestion from "./cash-or-insurance-question/cash-or-insurance-question";
import textBlock from "@/common-components/text-block/text-block";
import store from "@/store";

import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { Form } from "vee-validate";


export default {
  name: "quote",
  async beforeRouteEnter(to, from, next) {
    // Call APIs
    const cmsContent = await fetchCmsContentForPage(to.query.fmgPage);

    // Call the "next" function to complete the transition to this page.
    next((vm) => {
      vm.setCmsContent(cmsContent);
    });
  },
  data(){
    return {
      isInsurance: false,
    }
  },
  methods: {
    arePagePrerequisitesValid() {
      if (store.getters.order.damage.isRepair || store.getters.order.lineItems.glassParts.length > 0) {
        return true;
      }
      return false;
    }
  },
  computed: {
    years() {
      return ["2011", "2012"];
    },
    answersFromCms() {
      return ["Pay on my own", "Pay with insurance"];
    },
    selectedChipCountValues: {
      get: function() {
        return this.modelValue;
      },
      set: function(newValue) {
        this.$emit("update:modelValue", newValue);
      },
    },
  },
  components: {
    funnelHeader,
    funnelFooter,
    vehicleBanner,
    funnelSubHeader,
    Form,
    radioServicePackage,
    textBlock,
    cashOrInsuranceQuestion
  },

};
</script>
