(function() {
    // Do not load in mobilbank unless we are on the actual chat page, where the class "dialoghub_fullscreen" is set
    if (false && !document.body.classList.contains('dialoghub_fullscreen')) {
        return;
    }

    const printMediaQuery = window.matchMedia('print');
    const minWidthMediaQuery = window.matchMedia('(min-width: 768px)');
    const initialScreenSize = minWidthMediaQuery.matches ? 'desktop' : 'mobile'

    const fid = "fid-lom-skjaak"
    const dialoghubOrigin = "https:\/\/www.sparebank1.no"
    const market = null
    const marketQueryParam = market ? `&market=${market}` : ''
    const targetOrigin = window.location.origin;  // The origin of the window outside the iframe
    const targetPathnameAndSearch =
    window.location.pathname + window.location.search; // The path and search of the url of the window outside of iframe. Used for admin settings.
    const startChatFilter = new URLSearchParams(window.location.search).get('dialoghubStartChatFilter');
    const startChatFilterQueryParam = startChatFilter ? `&dialoghubStartChatFilter=${startChatFilter}` : '';

    const iframe = document.createElement('iframe');
    const iframeId = 'dialoghub-iframe';
    iframe.id = iframeId;
    iframe.setAttribute(
        'src',
        `${dialoghubOrigin}/bank/dialoghub/iframe?bank=${fid}${marketQueryParam}&screenSize=${initialScreenSize}&targetOrigin=${targetOrigin}&targetPathnameAndSearch=${targetPathnameAndSearch}${startChatFilterQueryParam}`
    );
    iframe.setAttribute('role', 'region');
    iframe.setAttribute('aria-label', 'Chat');
    iframe.style.setProperty('display', 'none');

    const mediaQueryListener = () => updateIframeScreenSize(iframe, minWidthMediaQuery, dialoghubOrigin);
    addMediaEventListener(minWidthMediaQuery, mediaQueryListener);
    addMediaEventListener(printMediaQuery, () => {
        if(printMediaQuery.matches) {
            iframe.style.setProperty('display', 'none');
        } else {
            iframe.style.setProperty('display', 'block');
        }
    })

    const badge = document.createElement('div');
    badge.id = 'dialoghubUnreadMessagesBadge';
    let shouldDisplayBadge = false;

    window.addEventListener('message', (event) => {
        let url;
        try {
            url = new URL(event.origin);
        } catch (e) {
            // In production we have seen cases where we receive (invalid) message events that are missing the origin
            // property. The origin of these events is unclear, but assuming that they are not coming from our iframe,
            // it should be safe to ignore these events.
            return
        }
        if (url.origin !== dialoghubOrigin) return;
        switch (event.data.type) {
            case 'iframeResizeMessage': {
                handleIframeResizeMessage(event.data, iframe, badge, shouldDisplayBadge);
                break;
            }
            case 'redirectAfterLoginMessage': {
                window.location.href = event.data.redirectUrl;
                break;
            }
            case 'reloadPageAfterLoginMessage': {
                window.location.reload();
                break;
            }
            case 'unreadMessagesCountMessage': {
                shouldDisplayBadge = handleUnreadMessagesCountMessage(event.data, badge, iframe);
                break;
            }
            case 'chatCrashMessage': {
                if (document.body.querySelector(`#${iframeId}`)) {
                    document.body.removeChild(iframe);
                }
                minWidthMediaQuery.removeEventListener('change', mediaQueryListener);
                break;
            }
            default: {
                // NO-OP
            }
        }
    });

    document.body.append(iframe);
    document.body.append(badge);
    initDialoghubWindowApiExtension(iframe, dialoghubOrigin);
    initPopStateListener(iframe, dialoghubOrigin);
    initOpenChatAnimation();
})();

function handleIframeResizeMessage(data, iframe, badge, shouldDisplayBadge) {
    if (data.iframeSize === 'open') {
        hideUnreadMessagesBadge(badge);
    } else if (data.iframeSize === 'slider_open' || data.iframeSize === 'slider_close') {
        if (shouldDisplayBadge) {
            hideUnreadMessagesBadge(badge);
            // Wait for slide animation to finish
            setTimeout(() => {
                const badgeStyle = data.iframeSize === 'slider_open' ? Object.assign({ right: '246px' }, data.badgeStyle) : data.badgeStyle;
                showUnreadMessagesBadge(badge, badgeStyle);
            }, 1200);
        }
    } else {
        if (shouldDisplayBadge) {
            overrideElementStylesFromStyleObject(data.badgeStyle, badge);
        }
    }
    overrideElementStylesFromStyleObject(data.style, iframe);
}

function handleUnreadMessagesCountMessage(data, badge, iframe) {
    let isDesktop = iframe.style.width === '96px';
    if (isDesktop) {
        if (data.unreadMessageCount > 0) {
            overrideElementStylesFromStyleObject(data.badgeStyle, badge);
            badge.innerText = data.unreadMessageCount.toString();
            return true;
        } else {
            overrideElementStylesFromStyleObject({ display: 'none' }, badge);
            return false;
        }
    }
    let sliderIsOut = iframe.style.width === '260px';
    let sliderIsIn = iframe.style.width === '50px';
    if (data.unreadMessageCount > 0) {
        if (sliderIsIn) {
            overrideElementStylesFromStyleObject(data.badgeStyle, badge);
        }
        if (sliderIsOut) {
            overrideElementStylesFromStyleObject(Object.assign({ right: '246px' }, data.badgeStyle), badge);
        }
        badge.innerText = data.unreadMessageCount.toString();
        return true;
    } else {
        overrideElementStylesFromStyleObject({ display: 'none' }, badge);
        return false;
    }
}

function updateIframeScreenSize(iframe, mediaQuery, dialoghubOrigin) {
    if (mediaQuery.matches) {
        iframe.contentWindow.postMessage({ type: 'updateScreenSizeMessage', screenSize: 'desktop' }, dialoghubOrigin);
    } else {
        iframe.contentWindow.postMessage({ type: 'updateScreenSizeMessage', screenSize: 'mobile' }, dialoghubOrigin);
    }
}

function initDialoghubWindowApiExtension(iframe, dialoghubOrigin) {
    window.dialoghub = {
        sendMessage: (message) =>
            iframe.contentWindow.postMessage(
                { type: 'sendMessageWindowApiMessage', message: message },
                dialoghubOrigin
            ),
        openChat: (message) =>
            iframe.contentWindow.postMessage(
                { type: 'openChatWindowApiMessage' },
                dialoghubOrigin
            )
    };
}

// For single page apps where we navigate, we listen for pop state events which means that the user navigates.
// Each time this happens, we must reset proactive chat timers.
function initPopStateListener(iframe, dialoghubOrigin) {
    window.addEventListener('popstate', () => {
        iframe.contentWindow.postMessage(
            {
                type: 'popstateEventMessage'
            },
            dialoghubOrigin
        );
    });
}

function initOpenChatAnimation() {
    const openChatAnimationStyleTag = document.createElement('style');
    openChatAnimationStyleTag.innerHTML = `@keyframes open-chat-animation { 0% { margin-bottom: -50px; opacity: 0; } 100% { margin-bottom: 0; opacity: 1; }};`;
    document.head.appendChild(openChatAnimationStyleTag);
}

function hideUnreadMessagesBadge(badge) {
    overrideElementStylesFromStyleObject({ display: 'none' }, badge);
}

function showUnreadMessagesBadge(badge, style) {
    overrideElementStylesFromStyleObject(style, badge);
}

function overrideElementStylesFromStyleObject(styleObject, elementToStyle) {
    elementToStyle.style = mapCSSAsJsonToCSSString(styleObject);
}

function mapCSSAsJsonToCSSString(styleObject) {
    let newStyleAsString = '';
    Object.entries(styleObject).forEach((styleProperty) => {
        newStyleAsString += styleProperty[0] + ': ' + styleProperty[1] + '; ';
    });
    return newStyleAsString;
}

function addMediaEventListener(mediaQuery, listener) {
    if (mediaQuery.addEventListener) {
        mediaQuery.addEventListener('change', listener);
    } else {
        // To support Safari, which does not have addEventListener
        mediaQuery.addListener(listener);
    }
}