<template>
    <div class="suggest-timeslot-modal-container">
        <modal
            ref="suggestTimeslotModal"
            :onModalClosedCallback="onModalClosed">
            <div>
                <div class="header">{{ modalHeaderText }}</div>
                <div class="subheader">{{ modalHeaderSubText }}</div>
            </div>
            <div>
                <div class="message"
                    v-html="modalBodyText">
                </div>
                <div class="appointment-info"
                    v-html="modalAppointmentInformationText">
                </div>
            </div>
            <div class="footer-container">
                <div>
                    <button type="button" aria-live="polite" aria-label="Confirm Appointment" class="btn btn-danger confirm-appointment"
                        @click="confirmAppointmentClicked">
                        {{ modalCloseButtonText }}
                    </button>
                </div>
                <div>
                    <button type="button" aria-live="polite" aria-label="See more options" class="btn btn-link see-more-options"
                        @click="seeMoreOptionsClicked">
                        {{ modalFooterSubText }}
                    </button>
                </div>
            </div>
        </modal>
    </div>
</template>

<script>
import modal from '@/digital-components/modal/modal.vue';
import {
    convertDateToTwoDigitDay,
    getDisplayTextForDurationLength,
    militaryToTwelveHourTime
} from '@/helpers/date-helper';

export default {
    name: 'suggest-timeslot-modal',
    components: {
        modal
    },
    emits: ['confirm-appointment-clicked'],
    data() {
        return {
            confirmedAppointment: false,
            timeSlotForAutoSelectionMobile: {}
         };
     },
    props: {
        cmsWidgetName: {
            type: String,
            default: 'SuggestTimeslotModal'
        }
    },
    computed: {
        customAppointmentEstimate() {
            return getDisplayTextForDurationLength(this.timeSlotForAutoSelectionMobile.estimatedServiceMinutesMin, this.timeSlotForAutoSelectionMobile.estimatedServiceMinutesMax)
        },
        customAppointmentWindow() {
            return `${militaryToTwelveHourTime(this.timeSlotForAutoSelectionMobile?.timeSlot?.startTime)} - ${militaryToTwelveHourTime(this.timeSlotForAutoSelectionMobile?.timeSlot?.endTime)}`;
        },
        customDayOfWeek() {
            return this.timeSlotForAutoSelectionMobile.dayOfWeek ? this.timeSlotForAutoSelectionMobile.dayOfWeek : '';
        },
        customDayOfWeekMonthDayYear() {
            if (!this.timeSlotForAutoSelectionMobile?.date) {
                return '';
            }

            const dayOfWeekToUse = this.customDayOfWeek;
            const year = this.timeSlotForAutoSelectionMobile.dateObject.getFullYear();
            const month = this.timeSlotForAutoSelectionMobile.dateObject.toLocaleString('en-US', { month: 'long' });
            const day = convertDateToTwoDigitDay(this.timeSlotForAutoSelectionMobile.dateObject);
            return `${dayOfWeekToUse}, ${month} ${day}, ${year}`;
        },
        modalAppointmentInformationText() {
            return this.getCmsContent(this.cmsWidgetName, 'BodyText2')
                    .replaceAll('{custom:dowMonthDayYear}', this.customDayOfWeekMonthDayYear)
                    .replaceAll('{custom:appointmentEstimate}', this.customAppointmentEstimate)
                    .replaceAll('{custom:appointmentWindow}', this.customAppointmentWindow);
        },
        modalBodyText() {
            return this.getCmsContent(this.cmsWidgetName, 'BodyText')
                    .replaceAll('{custom:damageType}', this.timeSlotForAutoSelectionMobile.isRepair ? 'repair' : 'replace',)
                    .replaceAll('{custom:dayOfWeekLong}', this.customDayOfWeek);
        },
        modalCloseButtonText() {
            return this.getCmsContent(this.cmsWidgetName, 'FooterText');
        },
        modalFooterSubText() {
            return 'See more options';
        },
        modalHeaderSubText() {
            return this.getCmsContent(this.cmsWidgetName, 'SubheaderText');
        },
        modalHeaderText() {
            return this.getCmsContent(this.cmsWidgetName, 'HeaderText');
        },
    },
    methods: {
        confirmAppointmentClicked() {
            this.confirmedAppointment = true;
            this.$emit('confirm-appointment-clicked', this.timeSlotForAutoSelectionMobile);
            this.$refs.suggestTimeslotModal.closeModal();
        },
        onModalClosed() {
            this.pushEvent();
            this.confirmedAppointment = false;
            this.timeSlotForAutoSelectionMobile = {};
        },
        openModal(timeSlotForAutoSelectionMobile) {
            this.timeSlotForAutoSelectionMobile = timeSlotForAutoSelectionMobile;
            this.$refs.suggestTimeslotModal.openModal();
        },
        pushEvent() {
            const gaAction = this.confirmedAppointment ? this.GaActions.YES : this.GaActions.NO;
            if (this.timeSlotForAutoSelectionMobile && this.timeSlotForAutoSelectionMobile.timeSlot) {
                this.pushEventToGA(
                    this.GaCategories.CONFIRMATION_CLICKED,
                    gaAction,
                    this.timeSlotForAutoSelectionMobile.timeSlot.startTime +
                        "-" +
                        this.timeSlotForAutoSelectionMobile.timeSlot.endTime +
                        " " +
                        this.timeSlotForAutoSelectionMobile.date,
                    true
                );
            }
        },
        seeMoreOptionsClicked() {
            this.$refs.suggestTimeslotModal.closeModal();
        },
        footerButtonClick() {
            this.$refs.suggestTimeslotModal.closeModal();
        },
    }
};
</script>

<style lang="scss" scoped>
.suggest-timeslot-modal-container {
    .modal {
        padding-right: 0;
    }
    :deep(.modal) {
        .modal-dialog {
            @include media-breakpoint-up(xs) {
                width: auto;
                max-width: unset;
            }
            @include media-breakpoint-up(xl) {
                width: 37.5rem;
                max-width: 37.5rem;
            }            

            .modal-content {
                width: 22rem;
                max-width: 22rem;
                padding: 1.5rem 0;
                border-radius: 0.5rem;
                line-height: 1.5rem;

                .modal-header {
                    padding: 0;
                }

                .modal-body {
                    padding: 0 1rem;
                }

                .modal-footer {
                    display: none;
                }

                .header {
                    margin-top: 1rem;
                    color: #db0020;
                    text-align: center;
                    text-transform: uppercase;
                    letter-spacing: 0.03em;
                    font-weight: 600;
                    font-size: 0.875rem;
                }

                .subheader {
                    color: black;
                    text-align: center;
                    letter-spacing: 0.03em;
                    font-weight: 400;
                    font-size: 1.25rem;
                    line-height: 2rem;
                }

                .message {
                    margin-top: 1.5rem;
                    color: #525656;
                    letter-spacing: 0.03em;
                    font-weight: 400;
                    font-size: 1rem;
                    line-height: 1.625rem;

                    .emphasize {
                        color: black;
                        font-weight: 600;
                    }
                }

                .appointment-info {
                    margin-top: 1rem;
                    padding: 1rem;
                    background-color: #f4f4f4;
                    letter-spacing: 0.03em;
                    font-weight: 400;
                    font-size: 0.875rem;

                    .emphasize {
                        color: black;
                        font-weight: 600;
                        margin-right: 0.25rem;
                    }
                }

                .footer-container {
                    margin-top: 1.5rem;
                    padding: 0 1.5rem;
                    border: none;

                    .confirm-appointment {
                        width: 100%;
                        padding: .75rem 0;
                        border-radius: 4.5rem;
                        letter-spacing: 0.03em;
                        font-weight: 600;
                        font-size: 1rem;
                    }

                    .see-more-options {
                        text-align: center;
                        width: 100%;
                        margin-top: 1.5rem;
                        letter-spacing: 0.03em;
                        font-weight: 600;
                        font-size: 1rem;
                        line-height: 1.625rem;
                    }
                }                
            }
        }
    }
}

</style>