<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="center"
                margin="mt-1"
                class="dark-header" />
            <textBlock
                :customText="subHeaderBody"
                typeStyle="body"
                justifyText="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
                    cmsWidgetName="ScheduleWidget"
                    :appointmentType="appointmentType"
                    @edit-clicked="editSchedule" />

                <hr class="my-0" />

                <customerReview
                    cmsWidgetName="CustomerReviewWidget"
                    :customer="customerInfo"
                    @edit-clicked="editCustomerDetails" />
            </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 customerReview from "@/layouts/review/review-sections/customer-review/customer-review";

import { AppointmentTypeStrings } from "@/constants/schedule-constants";

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

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

        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() {
            // Vehicle
            const vehicle = store.getters.order.vehicle;
            const vehicleReqs = !!(vehicle.year && vehicle.make && vehicle.model && vehicle.style);

            // Damage
            const damage = store.getters.order.damage;
            const damageReqs = !!(
                (damage.isRepair && damage.numberOfChips) ||
                (!damage.isRepair && damage.glassToReplace?.length)
            );

            // Service Package
            const lineItems = store.getters.order.lineItems;
            // damageReqs handles checking for damage, even though it is also required for this section.
            const packageReqs = !!(
                (damage.isRepair || lineItems.glassParts) &&
                lineItems.supportingItems &&
                lineItems.vaps
            );

            // 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 &&
                schedule.jobMaxMinutes &&
                schedule.jobMinMinutes
            );

            // Customer
            const customer = store.getters.order.customer;
            const customerReqs = !!(
                customer.firstName &&
                customer.lastName &&
                customer.phoneNumber &&
                customer.emailAddress
            );

            return (
                vehicleReqs &&
                damageReqs &&
                packageReqs &&
                serviceLocationReqs &&
                scheduleReqs &&
                customerReqs
            );
        },
        backButtonAction() {
            this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
        },
        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
            );
        },
        editCustomerDetails() {
            this.$router.navigateWithoutSaving(
                this.navigationScenarios.CLICKED_CUSTOMER_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;
        },
        customerInfo() {
            return this.$store.getters.order.customer;
        },
    },
    components: {
        funnelHeader,
        funnelFooter,
        vehicleBanner,
        buttonMain,
        textBlock,
        vehicleReview,
        damageReview,
        servicePackageReview,
        serviceLocationReview,
        scheduleReview,
        customerReview,
    },
};
</script>

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