<template>
    <div class="calendar-section">
        <div class="add-to-calendar">
            <button @click="openCalendarModal">
                <span class="add-to-calendar-span">
                    <img
                        src="@/assets/img/icons/add-to-calendar.svg"
                        class="add-to-calendar-img" />
                    <span class="add-to-calendar-text">Add to calendar</span>
                </span>
            </button>
        </div>
        <calendarModalQuestion
            ref="calendarModalQuestion"
            v-model="selectedCalendarOption"
            customComponentId="calendarModalQuestion"
            cmsWidgetName="CalendarModalQuestion"
            :calendarOptionsData="calendarValues"
            @calendarModalClosed="calendarModalClosed">
        </calendarModalQuestion>
    </div>
</template>
<script>
import calendarOptions from '@/constants/calendar-options';
import calendarStatus from '@/constants/calendar-status';
import { getDateFormat,
    calculateDuration,
    combineDateAndTime,
    shortTimeString,
    addMinutes } from '@/helpers/date-helper';
import { AppointmentTypeStrings, RouteCodeFlags } from '@/constants/schedule-constants';
import { getCalendarFile, download } from '@/helpers/add-to-calendar-helper';
import serviceType from '@/constants/service-type';
import applicationConfig from '@/constants/application-config.js';
import calendarModalQuestion from '@/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-question.vue';

export default {
    name: 'add-to-calendar',
    components: {
        calendarModalQuestion
    },
    props: {
        mobileWidgetName: String,
        inShopWidgetName: String,
        dropOffWidgetName: String,
        overnightDropOffWidgetName: String,
        allDayDropOffWidgetName: String,
        sameDayDropOffWidgetName: String,
        serviceLocationFullAddress: String,
        providerFullAddress: String,
        appointmentType: String,
        scheduleDate: String,
        scheduleStartTime: String,
        scheduleEndTime: String,
        hasRecalibrationPart: Boolean,
        uniqueId: String,
        isRepair: Boolean,
        routeCode: String
    },
    data() {
        return {
            selectedCalendarOption: null
        };
    },
    computed: {
        calendarValues: {
            get() {
                const obj = [];
                const options = Object.values(calendarOptions);
                for (let i = 0; i < options.length; i++) {
                    obj[i] = this.getCalendarData(options[i]);
                }
                return obj;
            }
        },
        IsSameDayDropOff() {
            const todaysDate = new Date().toISOString().split('T')[0];
            return this.scheduleDate === todaysDate;
        },
        AddToCalendar_Mobile_Subject() {
            return this.getCmsContent(this.mobileWidgetName, 'HeaderText');
        },
        AddToCalendar_Mobile_Body() {
            return this.getCmsContent(this.mobileWidgetName, 'BodyText');
        },
        AddToCalendar_InShop_Subject() {
            return this.getCmsContent('AddToCalendar_InShop', 'HeaderText');
        },
        AddToCalendar_InShop_Body() {
            return this.getCmsContent(this.inShopWidgetName, 'BodyText');
        },
        AddToCalendar_DropOff_Subject() {
            return this.getCmsContent(this.dropOffWidgetName, 'HeaderText');
        },
        AddToCalendar_DropOff_Body() {
            return this.getCmsContent(this.dropOffWidgetName, 'BodyText');
        },
        AddToCalendar_OvernightDropOff_Subject() {
            return this.getCmsContent(this.overnightDropOffWidgetName, 'HeaderText');
        },
        AddToCalendar_OvernightDropOff_Body() {
            return this.getCmsContent(this.overnightDropOffWidgetName, 'BodyText');
        },
        AddToCalendar_AllDayDropOff_Subject() {
            return this.getCmsContent(this.allDayDropOffWidgetName, 'HeaderText');
        },
        AddToCalendar_AllDayDropOff_Body() {
            return this.getCmsContent(this.allDayDropOffWidgetName, 'BodyText');
        },
        AddToCalendar_SameDayDropOff_Subject() {
            return this.getCmsContent(this.sameDayDropOffWidgetName, 'HeaderText');
        },
        AddToCalendar_SameDayDropOff_Body() {
            return this.getCmsContent(this.sameDayDropOffWidgetName, 'BodyText');
        },
        ServiceType() {
            if (!this.isRepair) {
                if (this.hasRecalibrationPart) {
                    return serviceType.REPLACEMENT_AND_RECALIBRATION;
                }
                return serviceType.REPLACEMENT;
            }
            return serviceType.REPAIR;
        },
        Appointment() {
            let subject = '';
            let location = '';
            const startDateTime = combineDateAndTime(this.scheduleDate, this.scheduleStartTime);
            let endDateTime = combineDateAndTime(this.scheduleDate, this.scheduleEndTime);
            let body = '';
            const isHTML = false;
            let duration = '';

            if (this.appointmentType === AppointmentTypeStrings.MOBILE
                || this.appointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP) {
                location = this.serviceLocationFullAddress?.replace('<br/>', '');
                subject = this.AddToCalendar_Mobile_Subject?.replace(
                    '{custom:serviceType}',
                    this.ServiceType
                );
                body = this.AddToCalendar_Mobile_Body;
            } else {
                location = this.providerFullAddress?.replace('<br/>', '');
                if (this.appointmentType === AppointmentTypeStrings.DROP_OFF) {
                    if (this.routeCode.includes(RouteCodeFlags.OVERNIGHT_DROP_OFF)) {
                        subject = this.AddToCalendar_OvernightDropOff_Subject;
                        body = this.AddToCalendar_OvernightDropOff_Body;
                    } else if (this.routeCode.includes(RouteCodeFlags.ALL_DAY_DROP_OFF)) {
                        if (this.IsSameDayDropOff) {
                            subject = this.AddToCalendar_SameDayDropOff_Subject;
                            endDateTime = addMinutes(startDateTime, 120);
                            body = this.AddToCalendar_SameDayDropOff_Body;
                        } else {
                            endDateTime = addMinutes(startDateTime, 120);
                            subject = this.AddToCalendar_AllDayDropOff_Subject?.replace(
                                '{custom:startDateTime}',
                                shortTimeString(startDateTime)
                            ).replace('{custom:endDateTime}', shortTimeString(endDateTime));
                            body = this.AddToCalendar_AllDayDropOff_Body?.replace(
                                '{custom:endDateTime}',
                                shortTimeString(endDateTime)
                            );
                        }
                    } else {
                        subject = this.AddToCalendar_DropOff_Subject?.replace(
                            '{custom:serviceType}',
                            this.ServiceType
                        );
                        body = this.AddToCalendar_DropOff_Body?.replace(
                            '{custom:address}',
                            location
                        );
                    }
                } else {
                    subject = this.AddToCalendar_InShop_Subject?.replace(
                        '{custom:serviceType}',
                        this.ServiceType
                    );
                    body = this.AddToCalendar_InShop_Body?.replace('{custom:address}', location);
                }
                duration = calculateDuration(startDateTime, endDateTime);
            }
            return {
                Subject: subject,
                Location: location,
                StartDate: startDateTime,
                EndDate: endDateTime,
                RefrrlSeqNum: this.uniqueId,
                Body: body,
                IsHTML: isHTML,
                Duration: duration
            };
        }
    },
    watch: {
        selectedCalendarOption(newValue) {
            if (newValue) {
                this.setCalendarAppointment(newValue);
            }
        }
    },

    methods: {
        setCalendarAppointment(calendarOption) {
            if (
                calendarOption.name === calendarOptions.ICAL
                || calendarOption.name === calendarOptions.OUTLOOK
            ) {
                this.getAppointment();
            } else {
                window.open(calendarOption.url);
            }
        },
        calendarModalClosed() {
            // Clear the selectedOption if close the modal
            this.selectedCalendarOption = null;
        },
        openCalendarModal() {
            this.$refs.calendarModalQuestion.openModal();
        },
        getCalendarData(type) {
            let URL = '';
            const dateFormat = 'yyyyMMddTHHmmss';
            const outlookComTimeSpanFormat = 'yyyy-MM-ddTHH:mm:ss';
            if (type === calendarOptions.OUTLOOKCOM) {
                URL = `${applicationConfig.OUTLOOK_CALENDAR}&startdt=${encodeURIComponent(getDateFormat(this.Appointment.StartDate, outlookComTimeSpanFormat))}&enddt=${encodeURIComponent(getDateFormat(this.Appointment.EndDate, outlookComTimeSpanFormat))}&subject=${encodeURIComponent(this.Appointment.Subject)}&body=${encodeURIComponent(this.Appointment.Body)}&location=${encodeURIComponent(this.Appointment.Location)}`;
            }
            if (type === calendarOptions.GOOGLE) {
                URL = `${applicationConfig.GOOGLE_CALENDAR}&text=${encodeURIComponent(this.Appointment.Subject)}&dates=${encodeURIComponent(getDateFormat(this.Appointment.StartDate, dateFormat))}/${encodeURIComponent(getDateFormat(this.Appointment.EndDate, dateFormat))}&details=${encodeURIComponent(this.Appointment.Body)}&location=${encodeURIComponent(this.Appointment.Location)}&sf=true&output=xml`;
            }
            if (type === calendarOptions.YAHOO) {
                URL = `${applicationConfig.YAHOO_CALENDAR}&TITLE=${encodeURIComponent(this.Appointment.Subject)}&DESC=${encodeURIComponent(this.Appointment.Body)}&ST=${encodeURIComponent(getDateFormat(this.Appointment.StartDate, dateFormat))}&DUR=${this.Appointment.Duration}&in_loc=${encodeURIComponent(this.Appointment.Location)}`;
            }
            return {
                url: URL,
                name: type,
                icon: require(`@/assets/img/icons/${type}.svg`)
            };
        },
        getAppointment() {
            let body = this.Appointment.Body;
            body = body?.replace('|', '<').replace('~', '>');

            const calFile = {
                Location: this.Appointment.Location,
                Body: body,
                IsHTML: this.Appointment.IsHTML,
                UniqueId: this.Appointment.RefrrlSeqNum,
                Subject: this.Appointment.Subject,
                StartDate: this.Appointment.StartDate,
                EndDate: this.Appointment.EndDate,
                Status: calendarStatus.BUSY
            };
            const calBody = getCalendarFile(calFile);
            download('SafeliteAppointment.ics', calBody);
        }
    }
};
</script>
<style scoped>
.add-to-calendar-text {
    margin: 0 0 0 0.4375rem;
    color: #1574a1;
    vertical-align: middle;
}
.add-to-calendar button {
    border: 0;
    background-color: #fff;
}
.calendar-section {
    display: table;
    position: relative;
    margin: 0 auto;
}
.calendar-section .add-to-calendar {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.calendar-section .add-to-calendar .add-to-calendar-span {
    cursor: pointer;
}
.calendar-section .add-to-calendar .add-to-calendar-img {
    display: inline;
    width: 1.25rem;
}
</style>
