<template>
    <textBlock
        :customText="durationTextBlockCopy"
        typeStyle="small"
        marginTopSizeOverride="0"
        class="duration-text-block" />
</template>

<script>
// Components
import textBlock from "@/digital-components/text-block/text-block";

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

// Helpers
import { getDisplayTextForDurationLength } from "@/helpers/duration-length-helper";

export default {
    name: "duration-text-block",
    props: {
        isSameDay: Boolean,
        appointmentType: String,
        estimatedServiceMinutesMinimum: String,
        estimatedServiceMinutesMaximum: String,
        isOvernightDropoff: Boolean,
    },
    data() {
        return {
            selectedRouteCode: null,
            selectedAnswerForDropOffOrInshop: null,
            selectedAnswerForTimeSlots: null,
        };
    },
    computed: {
        dropOffDurationText() {
            return this.getCmsContent("DropOffTimeSlotModal", cmsWidgetFieldMappings.DURATION);
        },
        sameDayDropoffDurationText() {
            return this.getCmsContent(
                "SameDayDropOffTimeSlotModal",
                cmsWidgetFieldMappings.DURATION
            );
        },
        overnightDropoffDurationText() {
            return this.getCmsContent(
                "OvernightDropOffTimeSlotModal",
                cmsWidgetFieldMappings.DURATION
            );
        },
        inshopDurationText() {
            const inshopDurationTextWithoutTime = this.getCmsContent(
                "TimeSlotModalQuestion",
                cmsWidgetFieldMappings.DURATION
            );

            const inshopDurationTime = getDisplayTextForDurationLength(
                this.estimatedServiceMinutesMinimum,
                this.estimatedServiceMinutesMaximum
            );

            if (this.estimatedServiceMinutesMinimum && this.estimatedServiceMinutesMaximum) {
                return `${inshopDurationTextWithoutTime} <b>${inshopDurationTime}</b>`;
            }

            return null;
        },
        mobileDurationText() {
            const mobileDurationTextWithoutTime = this.getCmsContent(
                "TimeSlotModalQuestion",
                cmsWidgetFieldMappings.DURATION
            );

            const mobileDurationTime = getDisplayTextForDurationLength(
                this.estimatedServiceMinutesMinimum,
                this.estimatedServiceMinutesMaximum
            );

            if (this.estimatedServiceMinutesMinimum && this.estimatedServiceMinutesMaximum) {
                return `${mobileDurationTextWithoutTime} ${mobileDurationTime}`;
            }

            return null;
        },
        durationTextBlockCopy() {
            if (this.appointmentType === AppointmentTypeStrings.MOBILE) {
                return this.mobileDurationText;
            } else if (this.appointmentType === AppointmentTypeStrings.DROP_OFF) {
                return this.getDurationTextBlockCopyForDropoff();
            } else {
                return this.inshopDurationText;
            }
        },
    },
    methods: {
        getDurationTextBlockCopyForDropoff() {
            if (this.isOvernightDropoff) {
                return this.overnightDropoffDurationText;
            } else {
                if (this.isSameDay) {
                    return this.sameDayDropoffDurationText;
                } else {
                    return this.dropOffDurationText;
                }
            }
        },
    },
    components: {
        textBlock,
    },
};
</script>

<style></style>
