<template>
    <div>
        <div class="site-header d-flex justify-content-center align-items-center flex-column">
            <img id="siteHeaderImage" class="img-fluid" :src="imageSrc" :alt="altText" />
            <menuModal/>
        </div>
        <alert
            v-if="displayGlobalAlert"
            class="position-absolute rounded-0 w-100 border-0 shadow-sm start-0"
            cmsWidgetName="GlobalAlert"
            :manualHeadline="globalAlertMessage.messageHeadline"
            :manualCopy="globalAlertMessage.messageCopy"
            :alertClass="globalAlertMessage.type"
            v-bind:isDismissible="globalAlertMessage.isDismissible" />
    </div>
</template>

<script>
import menuModal from "@/common-components/site-header/menu-modal/menu-modal";
import alert from "@/ux-components/alert/alert";
import eventBus from "@/helpers/event-bus/event-bus";
import { globalEvents } from "@/constants/events";

    export default({
        name: "siteHeader",
        data() {
            return {
                displayGlobalAlert: false,
                globalAlertMessage: {
                    isDismissible: false,
                    messageCopy: "",
                    messageHeadline: "",
                    type: "",
                },
            };
        },
        props: {
            cmsWidgetName: String,
        },
        computed: {
            imageSrc()
            {
                return this.answersToDisplay().AnswerImageUrl;
            },
            altText()
            {
                return this.answersToDisplay().AltText;
            },
            hexCode()
            {
                return this.answersToDisplay().HexCode;
            },
            headerAnswers()
            {
                return this.getCmsContent(this.cmsWidgetName, "Answers")
            }
        },
        methods:
        {
            answersToDisplay() 
            {
                const filteredAnswers = Array.isArray(this.headerAnswers)
                    ? this.headerAnswers.filter((ans) => {
                      const accountNumber = ans.AccountNumber;
                      return (
                        accountNumber === this.mainStore.order.accountNumber 
                      );
                  })
                : [];
                return filteredAnswers;
            },
        },
        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;
            }
        },
        components: {
            menuModal,
            alert
        },
    })
</script>

<style lang="scss" scoped>

.site-header {
  padding: 0.97rem 0;
}
.logo-image {
    max-width: 78px;
}
.alert {
    left: 0;
    top: 72px;
}
</style>