<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" />

            <div>
                <hr />
            </div>

            <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="editVehicle" />

                <hr class="my-0" />

                <damageReview
                    cmsWidgetName="DamageReviewWidget"
                    damageLocationsWidgetName="DamageLocationsWidget"
                    :damage="damageInfo"
                    @edit-clicked="editDamage" />

                <hr class="my-0" />

                <servicePackageReview
                    ref="servicePackageReview"
                    servicePackageOptionsCmsName="ServicePackageTitle"
                    defaultPackageItemsCmsName="DefaultPackageItemDescriptions"
                    vapsItemsCmsName="VapsItemDescriptions"
                    :damage="damageInfo"
                    :lineItems="lineItems"
                    @edit-clicked="editServicePackage" />

                <hr class="my-0" />

                <serviceLocationReview
                    cmsWidgetName="ServiceLocationTitleWidget"
                    :serviceLocation="serviceLocationInfo"
                    @edit-clicked="editServiceLocation" />

                <hr class="my-0" />

                <scheduleReview
                    headerCmsWidgetName="ScheduleTitleWidget"
                    cmsWidgetName="ScheduleWidget"
                    :schedule="scheduleInfo"
                    :appointmentType="appointmentType"
                    @edit-clicked="editSchedule" />
            </div>

            <div>
                <hr class="my-0" />
            </div>

            <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 damageReview from "@/layouts/review/review-sections/damage-review/damage-review";
import servicePackageReview from "@/layouts/review/review-sections/service-package-review/service-package-review";
import serviceLocationReview from "@/layouts/review/review-sections/service-location-review/service-location-review";
import scheduleReview from "@/layouts/review/review-sections/schedule-review/schedule-review";

import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
import baseMixin from "@/mixins/base-mixin.js";
import { storeActions } from "@/constants/store-actions";

export default {
    name: "review",
    async beforeRouteEnter(to, from, next) {
        // Call APIs
        const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
        // Get rain defense and wiper availability for package review section.
        const wipersPromise = baseMixin.methods.dispatchStoreAction(storeActions.GET_WIPERS);
        const rainDefensePromise = baseMixin.methods.dispatchStoreAction(
            storeActions.GET_RAIN_DEFENSE
        );

        const servicePackageInitialDataPromise = servicePackageReview.methods.loadInitialData();

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

        const resultMap = await settleAllPromises(promiseResultMap);

        next((vm) => {
            vm.setCmsContent(resultMap.cmsContent);

            vm.$refs.servicePackageReview.initializeComponent(resultMap.servicePackageData);
        });
    },
    data() {
        return {};
    },
    methods: {
        arePagePrerequisitesValid() {
            return true;
        },
        backButtonAction() {},
        forwardButtonAction() {},
        editVehicle() {
            this.$router.navigateWithoutSaving(
                this.navigationScenarios.CLICKED_VEHICLE_EDIT,
                this.$route
            );
        },
        editDamage() {
            this.$router.navigateWithoutSaving(
                this.navigationScenarios.CLICKED_DAMAGE_EDIT,
                this.$route
            );
        },
        editServicePackage() {
            this.$router.navigateWithoutSaving(
                this.navigationScenarios.CLICKED_SERVICE_PACKAGE_EDIT,
                this.$route
            );
        },
        editServiceLocation() {
            this.$router.navigateWithoutSaving(
                this.navigationScenarios.CLICKED_SERVICE_LOCATION_EDIT,
                this.$route
            );
        },
        editSchedule() {
            this.$router.navigateWithoutSaving(
                this.navigationScenarios.CLICKED_SCHEDULE_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;
        },
        damageInfo() {
            return this.$store.getters.damage;
        },
        lineItems() {
            return this.$store.getters.lineItems;
        },
        serviceLocationInfo() {
            return this.$store.getters.order.serviceLocation;
        },
        appointmentType() {
            return this.$store.getters.order.serviceLocation.appointmentType;
        },
        scheduleInfo() {
            return this.$store.getters.order.schedule;
        },
        exposeCms() {
            return this.$root.cmsContentByWidget;
        },
    },
    components: {
        funnelHeader,
        funnelFooter,
        vehicleBanner,
        buttonMain,
        textBlock,
        vehicleReview,
        damageReview,
        servicePackageReview,
        serviceLocationReview,
        scheduleReview,
    },
};
</script>

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