<template>
    <div class="page-container-grouped-styles position-relative">
        <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
        <div>
            <div class="container-fluid pb-2">
                <div class="row justify-content-md-center">
                    <div class="col-md-6 col-xl-4">
                        <navbar
                            cmsWidgetName="FunnelFooterWidget"
                            ref="navbar"
                            isBackButtonHidden="true"
                            @ForwardClicked="forwardButtonAction"
                            :buttonSize="true" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
// Components
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
import navbar from "@/fmg-components/nav-bar/nav-bar";
//Supporting files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { AppointmentTypeStrings } from "@/constants/schedule-constants";
import { settleAllPromises } from "@/helpers/layout-helper";
import store from "@/store";
export default {
    name: "confirmation",
    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.setCmsContent(resultMap.cmsContent);
        });
    },
    methods: {
        arePagePrerequisitesValid() {
            // Service Location
            const serviceLocation = store.getters.order.serviceLocation;
            const mobileReqs = !!(
                serviceLocation.address &&
                serviceLocation.city &&
                serviceLocation.state &&
                serviceLocation.zipCode
            );

            const providerLocation = serviceLocation.provider.address;
            const dropOffInshopReqs = !!(
                providerLocation.streetAddress &&
                providerLocation.city &&
                providerLocation.state &&
                providerLocation.zipCode
            );

            const isMobile = serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE;

            const serviceLocationReqs =
                (isMobile && mobileReqs) || (!isMobile && dropOffInshopReqs);

            // Schedule
            const schedule = store.getters.order.schedule;
            const scheduleReqs = !!(schedule.date && schedule.startTime && schedule.endTime);

            return serviceLocationReqs && scheduleReqs;
        },
        forwardButtonAction() {},
    },
    components: {
        funnelHeader,
        navbar,
    },
};
</script>
