<template>
    <div
        class="funnel-header d-flex justify-content-center align-items-center flex-column"
        v-if="imageSrc">
        <salesforceWebchat hideSalesforceWebchatLaunchButton />
        <img class="logo-image img-fluid" :src="imageSrc" alt="Safelite logo" />
        <!-- // menu-modal temporarily not in use until the hamburger menu is re-implemented for use with the progress bar. See display: none below. -->
        <menuModal />
        <!-- // menu-modal temporarily not in use until the hamburger menu is re-implemented for use with the progress bar. See display: none below. -->
        <progressBar />
    </div>
    <template v-for="globalAlert in globalAlertMessages" :key="globalAlert.id">
        <transition name="fade" mode="out-in">
            <alert
                v-if="globalAlert.displayAlert"
                class="rounded-0 w-100 border-0 shadow-sm"
                cmsWidgetName="GlobalAlert"
                :manualHeadline="globalAlert.messageHeadline"
                :manualCopy="globalAlert.messageCopy"
                :alertClass="globalAlert.type"
                v-bind:isDismissible="globalAlert.isDismissible" />
        </transition>
    </template>
</template>

<script>
import alert from "@/ux-components/alert/alert";
import eventBus from "@/helpers/event-bus/event-bus";
import { globalEvents } from "@/constants/events";
import menuModal from "@/fmg-components/funnel-header/menu-modal/menu-modal";
import salesforceWebchat from "../../digital-components/salesforce-webchat/salesforce-webchat.vue";
import progressBar from "@/fmg-components/funnel-header/progress-bar/progress-bar";

// Constants
const ALERT_DURATION = 3000; // millisecond time to display alert before dismissal

export default {
    name: "funnel-header",
    data() {
        return {
            globalAlertMessages: [],
        };
    },
    props: {
        cmsWidgetName: String,
        hideSalesforceWebchatLaunchButton: {
            type: Boolean,
            default: false,
        },
    },
    computed: {
        imageSrc() {
            return this.getCmsContent(this.cmsWidgetName, "LogoImage");
        },
    },
    methods: {
        pushGlobalAlert(alertToPush, isAutoDismissing) {
            alertToPush.displayAlert = true;
            alertToPush.id = crypto.randomUUID();
            if (isAutoDismissing) {
                setTimeout(() => {
                    alertToPush.displayAlert = false;
                    // force a re-evaluation of the globalAlertMessages to detect the v-if change
                    this.globalAlertMessages = this.globalAlertMessages.splice(0);
                }, ALERT_DURATION);
            }
            this.globalAlertMessages.push(alertToPush);
        },
    },
    components: {
        alert,
        menuModal,
        salesforceWebchat,
        progressBar,
    },
    mounted() {
        // Check if alert event is on the bus
        const alertEvent = eventBus.readAndPopEventFromBus(
            globalEvents.Categories.GLOBAL_ALERT,
            globalEvents.SubCategories.PAGE_NOT_FOUND
        );
        // If alert event is on the bus, then display the alert
        if (alertEvent !== undefined) {
            alertEvent.displayAlert = true;
            this.globalAlertMessages.push(alertEvent);
        }

        //Uknown alerts most likely were added by a failed api call in global-methods
        const unknownAlertEvent = eventBus.readAndPopEventFromBus(
            globalEvents.Categories.GLOBAL_ALERT,
            globalEvents.SubCategories.UNKNOWN_ERROR
        );

        if (unknownAlertEvent !== undefined) {
            unknownAlertEvent.displayAlert = true;
            this.globalAlertMessages.push(unknownAlertEvent);
        }
    },
};
</script>

<style lang="scss" scoped>
:deep(.menu-modal-container) {
    display: none; // This is temporary until the hamburger menu is re-implemented for use with the progress bar
}
.funnel-header {
    position: relative;
    padding: 0.97rem 0;
}

.logo-image {
    width: auto;
    height: 1.1875rem;
}
</style>
