<template>
    <div
        class="site-header-container"
        :style="logoBackgroundStyle">
        <div class="site-header iss-heritage-container-width">
            <div class="header-logo-container">
                <img
                    id="siteHeaderImage"
                    class="img-fluid"
                    :src="imageSrc"
                    :alt="altText" />
            </div>
            <div class="header-progress-bar-container">
                <progressBar />
            </div>
        </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 alert from '@/ux-components/alert/alert.vue';
import { useMainStore } from '@/store';
import eventBus from '@/helpers/event-bus/event-bus';
import { globalEvents } from '@/constants/events';
import progressBar from '@/iss-components/site-header/progress-bar/progress-bar.vue';

export default {
    name: 'site-header',
    components: {
        alert, progressBar
    },
    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-container {
    width: 100%;
    margin: 0;
    @include media-breakpoint-up(xs) {
        padding: 0.750rem 0.9375rem 1rem 0.9375rem;
    }

    @include media-breakpoint-up(md) {
        padding: 1rem 0 1.25rem 0;
    }

    .site-header {
        display: flex;
        @include media-breakpoint-down(md) {
            margin: 0 -.75rem;
        }

        .header-logo-container {
            flex: 1 1 auto;
        }
        .header-progress-bar-container {
            flex: 0 1 auto;
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }
    }
}

#siteHeaderImage {
    width: auto;
    @include media-breakpoint-up(xs) {
        height: 2.625rem; // 42px no padding in image
    }

    @include media-breakpoint-up(md) {
        height: 4rem; // 64px no padding in image
    }
}
</style>
