<template>
    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
        <!-- When customer-details is added: v-slot="{ meta }" -->
        <div class="page-container-grouped-styles">
            <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
            <vehicleBanner
                cmsWidgetName="VehicleBannerWidget"
                :displayGenericVehicleImage="false" />

            <textBlock
                :customText="subHeaderTitle"
                typeStyle="h5"
                justifyText="justify-content-center"
                margin="mt-1"
                class="dark-header" />
            <textBlock
                :customText="subHeaderBody"
                typeStyle="body"
                justifyText="justify-content-left"
                margin="mt-0 mb-2" />

            <buttonMain
                ref="buttonMain"
                isPrimary
                :buttonText="forwardButtonText"
                loaderColor="white"
                class="mb-2"
                @click-event="forwardButtonAction" />

            <hr />

            <textBlock
                customText="Appointment Details"
                typeStyle="label bold"
                justifyText="justify-text-left"
                margin="mt-0"
                class="dark-header" />

            <div class="px-4">
                <vehicleReview
                    cmsWidgetName="VehicleReviewWidget"
                    :vehicle="vehicleInfo"
                    @edit-clicked="navigateToVehicleYear" />
                <hr class="my-0" />
            </div>

            <hr />

            <funnelFooter
                cmsWidgetName="FunnelFooterWidget"
                @back-clicked="backButtonAction"
                @ForwardClicked="forwardButtonAction" />
        </div>
    </Form>
</template>

<script>
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer";
import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
import buttonMain from "@/ux-components/button-main/button-main";
import textBlock from "@/digital-components/text-block/text-block";
import vehicleReview from "@/layouts/review/review-sections/vehicle-review/vehicle-review";

import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";

export default {
    name: "review",
    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);

        next((vm) => {
            vm.setCmsContent(resultMap.cmsContent);
        });
    },
    data() {
        return {};
    },
    methods: {
        arePagePrerequisitesValid() {
            return true;
        },
        backButtonAction() {},
        forwardButtonAction() {},
        navigateToVehicleYear() {
            this.$router.navigateWithoutSaving(
                this.navigationScenarios.REVIEW_VEHICLE_EDIT,
                this.$route
            );
        },
    },
    computed: {
        subHeaderTitle() {
            return this.getCmsContent("FunnelSubHeaderWidget", "HeaderText");
        },
        subHeaderBody() {
            return this.getCmsContent("FunnelSubHeaderWidget", "BodyText");
        },
        forwardButtonText() {
            return this.getCmsContent("FunnelFooterWidget", "ForwardButtonText");
        },
        vehicleInfo() {
            return this.$store.getters.vehicle;
        },
    },
    components: {
        funnelHeader,
        funnelFooter,
        vehicleBanner,
        buttonMain,
        textBlock,
        vehicleReview,
    },
};
</script>

<style lang="scss" scoped>
.dark-header {
    color: $black;
    line-height: 1.6;
}
</style>
