<template>
    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
        <div class="page-container-grouped-styles">
            <loadingModal ref="loadingModal" />
            <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
            <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-5" />
            <div class="text-center mt-1 mb-3" v-if="ChangeShopLink.length">
                <span v-for="copy in ChangeShopLink" :key="copy">
                    <span v-if="doesCopyContainRouterLink(copy)" class="text-body">
                        <router-link
                            :to="{
                                query: { fmgPage: `${getRouterLinkRouteFromCopy(copy)}` },
                                name: 'root',
                            }"
                            >{{ getRouterLinkDisplayTextFromCopy(copy) }}</router-link
                        >
                    </span>
                    <span v-else class="m-0 text-body" v-html="copy"></span>
                </span>
            </div>
            <date-picker
                selectableDatesSetting="custom"
                v-model="selectedDate"
                :customSelectableDatesCallback="getAvailableDates" />
            <!-- todayOverrideDateString="2023-08-06T03:00:00" -->
            <time-slot-selection-modal
                ref="timeSlotModal"
                v-model="selectedTimeSlot"
                :dateForTimeSlotPicker="dateForTimeSlotPicker"
                :availableTimeSlots="availableTimeSlots"
                estimatedServiceMinutesMinimum="90"
                estimatedServiceMinutesMaximum="180" />
            <button @click="openModal">Click for timeslots</button>
            <funnel-footer
                cmsWidgetName="FunnelFooterWidget"
                ref="funnelFooter"
                :isForwardActionDisabled="!meta.valid"
                @back-clicked="backButtonAction"
                @ForwardClicked="forwardButtonAction" />
        </div>
    </Form>
</template>

<script>
// Components
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer";
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
import { Form, defineRule } from "vee-validate";
import datePicker from "@/digital-components/date-picker/date-picker";
import timeSlotSelectionModal from "./time-slot-selection-modal/time-slot-selection-modal";

// Supporting files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import baseMixin from "@/mixins/base-mixin.js";
import { storeActions } from "@/constants/store-actions";
import { settleAllPromises } from "@/helpers/layout-helper";
import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
import {
    doesCopyContainRouterLink,
    splitCopyOnCMSPlaceHolder,
    getRouterLinkRouteFromCopy,
    getRouterLinkDisplayTextFromCopy,
} from "@/helpers/cms-content-helper";
import { errorMessages } from "@/constants/error-messages";
import { required } from "@/helpers/validation-rules";
import { daysOfWeek, monthsOfYear } from "@/constants/scheduling.js";

defineRule("date-required", required(errorMessages.DATE_REQUIRED));

export default {
    name: "schedule",
    data() {
        return {
            selectedDate: null,
            selectedTimeSlot: null,
            dateForTimeSlotPicker: new Date("May 23 2023"),
            availableTimeSlots: [
                "8:00 AM",
                "10:30 AM",
                "11:00 AM",
                "12:30 AM",
                "1:00 PM",
                "2:00 PM",
                "4:30 PM",
                "8:00 AM",
                "10:30 AM",
                "11:00 AM",
                "12:30 AM",
                "1:00 PM",
                "2:00 PM",
                "4:30 PM",
                "8:00 AM",
                "10:30 AM",
                "11:00 AM",
                "12:30 AM",
                "1:00 PM",
                "2:00 PM",
                "4:30 PM",
            ],
            mockSelectableDatesData: [
                { dateString: "2023-04-28" },

                { dateString: "2023-05-04" },
                { dateString: "2023-05-09" },
                { dateString: "2023-05-11" },
                { dateString: "2023-05-17" },
                { dateString: "2023-05-18" },
                { dateString: "2023-05-19" },
                { dateString: "2023-05-23" },
                { dateString: "2023-05-24" },
                { dateString: "2023-05-25" },
                { dateString: "2023-05-30" },
                { dateString: "2023-05-31" },

                { dateString: "2023-06-01" },
                { dateString: "2023-06-02" },
                { dateString: "2023-06-06" },
                { dateString: "2023-06-07" },
                { dateString: "2023-06-09" },
                { dateString: "2023-06-12" },
                { dateString: "2023-06-13" },
                { dateString: "2023-06-15" },
                { dateString: "2023-06-16" },
                { dateString: "2023-06-17" },
                { dateString: "2023-06-20" },
                { dateString: "2023-06-21" },
                { dateString: "2023-06-22" },
                { dateString: "2023-06-23" },
                { dateString: "2023-06-26" },
                { dateString: "2023-06-27" },
                { dateString: "2023-06-28" },
                { dateString: "2023-06-29" },
                { dateString: "2023-06-30" },

                { dateString: "2023-07-01" },
                { dateString: "2023-07-03" },
                { dateString: "2023-07-04" },
                { dateString: "2023-07-05" },
                { dateString: "2023-07-06" },
                { dateString: "2023-07-07" },
                { dateString: "2023-07-10" },
                { dateString: "2023-07-11" },
                { dateString: "2023-07-12" },
                { dateString: "2023-07-13" },
                { dateString: "2023-07-14" },
                { dateString: "2023-07-15" },
                { dateString: "2023-07-17" },
                { dateString: "2023-07-18" },
                { dateString: "2023-07-19" },
                { dateString: "2023-07-20" },
                { dateString: "2023-07-21" },
                { dateString: "2023-07-24" },
                { dateString: "2023-07-25" },
                { dateString: "2023-07-26" },
                { dateString: "2023-07-27" },
                { dateString: "2023-07-28" },
                { dateString: "2023-07-29" },
                { dateString: "2023-07-31" },
            ],
            selectableDatesData: [],
        };
    },
    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);
        });
    },
    computed: {
        ChangeShopLinkText() {
            return this.getCmsContent("ChangeShopLink", "Text");
        },
        ChangeShopLink() {
            // Splits content when brackets are found in text so that text can be looped through and router-link can be injected when needed
            return this.splitCopyOnCMSPlaceHolder(this.ChangeShopLinkText);
        },
        DateSelectedReadableDate() {
            const dayOfWeek = this.dateForTimeSlotPicker.getDay();
            const month = this.dateForTimeSlotPicker.getMonth();
            const dayOfMonth = this.dateForTimeSlotPicker.getDate();
            return `${daysOfWeek[dayOfWeek]}, ${monthsOfYear[month]} ${dayOfMonth}`;
        },
    },
    methods: {
        doesCopyContainRouterLink,
        splitCopyOnCMSPlaceHolder,
        getRouterLinkRouteFromCopy,
        getRouterLinkDisplayTextFromCopy,
        arePagePrerequisitesValid() {
            return true;
            // NEED TODO - WHAT ARE PAGE REQ'S FOR THIS PAGE?
        },
        async getAvailableDates(startDate, endDate) {
            // USING DATES PASSED, MAKE AN API CALL
            const newShopTimeSlotsResponse = await baseMixin.methods.dispatchStoreAction(
                storeActions.GET_SHOP_TIME_SLOTS,
                {
                    startDate: startDate,
                    endDate: endDate,
                    shopAppointmentType: "mobile", // TODO - PASS THIS IN FROM PREVIOUS PAGE?
                },
                false
            );
            const newShopTimeSlots = newShopTimeSlotsResponse.data;
            // console.log("newShopTimeSlots ", newShopTimeSlots)

            // ADD API CALL RESULTS TO EXISTING DATE DATA
            this.selectableDatesData = this.selectableDatesData.concat(
                this.convertApiResponse(newShopTimeSlots.days)
            );
            console.log("this.selectableDatesData is now: ", this.selectableDatesData);

            // RETURN AGGREGATE DATE DATA
            return this.selectableDatesData;
        },
        convertApiResponse(responseData) {
            // DATA CONVERSION
            responseData?.forEach((date) => {
                const dateString = date.date;
                date.dateString = dateString;
                const dateStringPieces = dateString.split("-");
                date.year = Number(dateStringPieces[0]);
                date.month = Number(dateStringPieces[1]);
                date.date = Number(dateStringPieces[2]);
            });
            return responseData;
        },
        openModal() {
            this.$refs["timeSlotModal"].openModal();
        },
        backButtonAction() {
            this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
        },
        forwardButtonAction() {
            navigateToHeritageFunnel({ loadingModal: this.$refs.loadingModal });
        },
    },
    watch: {
        selectedDate(date) {
            /* EXAMPLE RETURNED date OBJECT:
                { "year": 2023, "month": 5, "date": 25, "dateString": "2023-05-25" }
            */
        },
    },
    components: {
        funnelHeader,
        funnelFooter,
        funnelSubHeader,
        Form,
        loadingModal,
        datePicker,
        timeSlotSelectionModal,
    },
};
</script>

<style lang="scss"></style>
