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

<script>
import menuModal from '@/iss-components/site-header/menu-modal/menu-modal.vue';
import alert from '@/ux-components/alert/alert.vue';
import { useMainStore } from '@/store';
import eventBus from '@/helpers/event-bus/event-bus';
import { globalEvents } from '@/constants/events';

export default {
    name: 'site-header',
    components: {
        menuModal,
        alert
    },
    props: {
        cmsWidgetName: String
    },
    data() {
        return {
            displayGlobalAlert: false,
            globalAlertMessage: {
                isDismissible: false,
                messageCopy: '',
                messageHeadline: '',
                type: ''
            },
            cmsClientHeader: null
        };
    },
    computed: {
        imageSrc() {
            return this.cmsClientHeader ? this.cmsClientHeader.imageUrl : '';
        },
        altText() {
            return this.cmsClientHeader ? this.cmsClientHeader.altText : '';
        },
        logoBackgroundStyle() {
            return {
                'background-color': this.cmsClientHeader
                    ? this.cmsClientHeader.hexCode
                    : '#FFFFFF'
            };
        }
    },
    mounted() {
        this.$nextTick(this.setupHeader);

        // 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}`;
        }
    },
    methods: {
        setupHeader() {
            const overrideCmsHeaderAnswers = this.getCmsContent(
                this.cmsWidgetName,
                'Answers'
            );
            if (
                overrideCmsHeaderAnswers
                && Array.isArray(overrideCmsHeaderAnswers)
            ) {
                const { parentAccountNumber } = useMainStore().issConfig;
                let headerOverrideToUse = overrideCmsHeaderAnswers.find((answer) =>
                    answer.AccountNumber === parentAccountNumber.toString());
                if (headerOverrideToUse == null) {
                    headerOverrideToUse = overrideCmsHeaderAnswers.find((answer) => answer.AccountNumber === '0');
                }

                if (headerOverrideToUse) {
                    this.cmsClientHeader = {
                        altText: headerOverrideToUse.AltText,
                        clientName: headerOverrideToUse.ClientName,
                        hexCode: headerOverrideToUse.HexCode,
                        imageId: headerOverrideToUse.ImageId,
                        imageUrl: headerOverrideToUse.AnswerImageUrl
                    };

                    return;
                }
            }
            const { clientHeader } = useMainStore().issConfig;
            if (clientHeader) {
                this.cmsClientHeader = clientHeader;
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.site-header {
    height: 56px;
    position: relative;
    @include media-breakpoint-down(md) {
        margin: 0 -.75rem;
    }
}
#siteHeaderImage {
    width: auto;
    height: 2.5rem;
}
</style>
