<template>
	<Form
		@submit="onSubmit"
		@invalid-submit="onInvalidSubmit"
		ref="theForm"
		v-slot="{ meta }"
		autocomplete="off" >
		<div class="container-fluid shadow rounded-3 p-2 position-relative make-tall">
			<funnelHeader ref="funnelHeader" />
			<vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
			<funnelSubHeader ref="funnelSubHeader" />		
			<customerQuestions ref="customerQuestions" v-model="customerQuestions" />
			<funnel-footer
				ref="funnelFooter"
				:isForwardActionDisabled="!meta.valid"
			/>
		</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 customerQuestions from "@/layouts/address-lookup/customer-questions/customer-questions";
import { Form } from "vee-validate";

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


export default {
	name: "address-lookup",
	async beforeRouteEnter(to, from, next) {
		// Call APIs
		const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);

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

		const resultMap = await settleAllPromises(promiseResultMap);

		// Call the "next" function to complete the transition to this page.
		next((vm) => {
			vm.$refs.funnelHeader.initializeComponent(
				resultMap.cmsContent.FunnelHeaderWidget
			);
			vm.$refs.vehicleBanner.initializeComponent(
				resultMap.cmsContent.VehicleBannerWidget
			);
			vm.$refs.funnelSubHeader.initializeComponent(
				resultMap.cmsContent.FunnelSubHeaderWidget
			);
			vm.$refs.funnelFooter.initializeComponent(
				resultMap.cmsContent.FunnelFooterWidget
			);
			vm.$refs.customerQuestions.initializeComponent([
					resultMap.cmsContent.StreetAddressQuestionWidget,
					resultMap.cmsContent.CityQuestionWidget,
					resultMap.cmsContent.StateQuestionWidget,
					resultMap.cmsContent.ZipQuestionWidget,
					resultMap.cmsContent.AlertVerificationWarningWidget,
					resultMap.cmsContent.AlertNoMatchWarningWidget,
					resultMap.cmsContent.FirstNameQuestionWidget,
					resultMap.cmsContent.LastNameQuestionWidget,
					resultMap.cmsContent.EmailAddressQuestionWidget,

				]
			);
		});
	},
	data() {
		return {
			customerQuestions: {
				addressQuestions: {
					streetAddress: "",
					city: "",
					state: "",
					zip: "",
				},
				firstName: "",
				lastName: "",
				emailAddress: "",
			}   
		}
	},
	methods: {
		arePagePrerequisitesValid() {
			return store.getters.vehicle.carId !== null;
		},
		resetDependentState() {
			// Invokes

		},
	},
	components: {
		funnelHeader,
		funnelFooter,
		vehicleBanner,
		funnelSubHeader,
		customerQuestions,
		Form
	},
};
</script>
