<template>
    <div
        class="funnel-header d-flex justify-content-center align-items-center flex-column"
        v-if="imageSrc">
        <img class="logo-image img-fluid" :src="imageSrc" alt="Safelite logo" />
        <menuModal />
    </div>
    <alert
        v-if="displayGlobalAlert"
        class="rounded-0 w-100 border-0 shadow-sm"
        cmsWidgetName="GlobalAlert"
        :manualHeadline="globalAlertMessage.messageHeadline"
        :manualCopy="globalAlertMessage.messageCopy"
        :alertClass="globalAlertMessage.type"
        v-bind:isDismissible="globalAlertMessage.isDismissible" />
</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";

export default {
    name: "funnel-header",
    data() {
        return {
            displayGlobalAlert: false,
            globalAlertMessage: {
                isDismissible: false,
                messageCopy: "",
                messageHeadline: "",
                type: "",
            },
        };
    },
    props: {
        cmsWidgetName: String,
    },
    computed: {
        imageSrc() {
            return this.getCmsContent(this.cmsWidgetName, "LogoImage");
        },
    },
    components: {
        alert,
        menuModal,
    },
    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) {
            this.displayGlobalAlert = true;
            this.globalAlertMessage = alertEvent;
        }
    },
};
</script>

<style lang="scss" scoped>
.funnel-header {
    position: relative;
    padding: 0.97rem 0;
}

.logo-image {
    max-width: 78px;
}
</style>
