<template>
    <div>
        <div class="site-header d-flex justify-content-center align-items-center flex-column py-2 mb-4" :style="logoBackgroundStyle">
            <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 "@/iss-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: ""
            },
            headerAnswers: null
        };
    },
    props: {
        cmsWidgetName: String
    },
    computed: {
        imageSrc()
        {
            return this.headerAnswers ? this.headerAnswers.AnswerImageUrl : "";
        },
        altText()
        {
            return this.headerAnswers ?  this.headerAnswers.AltText : "";
        },
        logoBackgroundStyle() {
            return {
                "background-color": this.headerAnswers ?  this.headerAnswers.HexCode : "#FFFFFF"
            };
        }
    },
    mounted() {
        const answers = this.getCmsContent(this.cmsWidgetName, "Answers");
        this.headerAnswers = Array.isArray(answers)
        ? answers.filter(x => x.AccountNumber == this.mainStore.issConfig.accountNumber)[0]
        : null;

        // 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;
        }

        //load client customization overrides
        const clientOverrideClass = this.mainStore.issConfig.styleSheet.trim();
        if(clientOverrideClass
            && clientOverrideClass != ""
            && !document.getElementsByTagName("body")[0].className.split(" ").includes(clientOverrideClass))
            {
                document.getElementsByTagName("body")[0].className += " " + clientOverrideClass;
            }
        },
        components: {
            menuModal,
            alert
        },
    })
    </script>

    <style lang="scss" scoped>
    .site-header {
        height: 72px;
    }
    .alert {
        left: 0;
        top: 72px;
    }

    #siteHeaderImage {
        height: 2.5rem;
    }
    </style>
