window.onload = function() {

    // Check use of cookies
    const allowCookies = false;
    // Import direct line for some front end checks.
    const ConnectionStatus = Object.freeze({
        // the status when the DirectLine object is first created/constructed
        "Uninitialized": 0,
        // currently trying to connect to the conversation
        "Connecting": 1,
        // successfully connected to the conversation. Connection is healthy so far as we know.
        "Online": 2,
        // last operation had an error with an expired token. Possibly waiting for someone to supply a new one.
        "ExpiredToken": 3,
        // the initial attempt to connect to the conversation failed. No recovery possible.
        "FailedToConnect": 4,
        // the bot ended the conversation
        "Ended": 5
    });

    // Not supported by Edge version 41, possibly < version 44
    navigator.browserSpecs = (function() {
        const ua = navigator.userAgent;
        var tem,
            M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
        if (/trident/i.test(M[1])) {
            tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
            return { name: "IE", version: (tem[1] || "") };
        }
        if (M[1] === "Chrome") {
            tem = ua.match(/\b(OPR|Edge)\/(\d+)/);
            if (tem != null) return { name: tem[1].replace("OPR", "Opera"), version: tem[2] };
        }
        M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, "-?"];
        if ((tem = ua.match(/version\/(\d+)/i)) != null)
            M.splice(1, 1, tem[1]);
        const [name, version] = M;
        return { name, version };
    })();

    function browserSupported() {

        if (navigator.browserSpecs.name === "Edge" && navigator.browserSpecs.version >= 16 ||
            navigator.browserSpecs.name === "Chrome" && navigator.browserSpecs.version >= 76 ||
            navigator.browserSpecs.name === "Firefox" && navigator.browserSpecs.version >= 69 ||
            navigator.browserSpecs.name === "Safari" && navigator.browserSpecs.version >= 11) {
            return true;
        } else {
            return false;
        }
    }

    function IsValueInEmpty(value) {
        if (value === "" || value == null || value === "undefined") {
            return true;
        }
        return false;
    }

    // Create function for fonts within chatbot
    // ReSharper disable once UnusedLocals
    function fontFamily(fonts) {
        return fonts.map(font => `'${font}'`).join(", ");
    }

    function getCookieObject() {
        const name = "agileDatumChatbot=";
        const ca = document.cookie.split(";");
        var cookieStr = "{}";
        for (let i = 0; i < ca.length; i++) {
            let c = ca[i];
            while (c.charAt(0) === " ") {
                c = c.substring(1);
            }
            if (c.indexOf(name) === 0) {
                cookieStr = c.substring(name.length, c.length);
            }
        }
        return JSON.parse(cookieStr);
    }

    function setCookieObject(cookieObj) {
        document.cookie = `agileDatumChatbot=${JSON.stringify(cookieObj)};expires=0;path=/`;
    }

    function getCookie(cookieKey) {
        const cookieObj = getCookieObject();
        return cookieObj[cookieKey];
    }

    function setCookie(cookieKey, cookieValue) {
        const cookieObj = getCookieObject();
        cookieObj[cookieKey] = cookieValue;
        setCookieObject(cookieObj);
    }

    var chatbotActive = false;

    // Create elements on page... 
    const avatarButton = document.createElement("div");
    document.body.appendChild(avatarButton);

    avatarButton.outerHTML = '<div id="chat-button" class="chat-button-theme-bubble">' +
        '<div class="chat-button"><svg id="chatbot-message-avatar-image" /> </div> </div>';

    const div = document.createElement("div");
    document.body.appendChild(div);

    div.outerHTML = '<div id="webchat" role="main">' +
        '<div id="chat">' +
        '<div id="app">' +
        '<div id="webchat-close"> <svg xmlns="http://www.w3.org/2000/svg" title="close the chat" style="fill: white;" viewBox="0 0 24 24"><path d="M 19 6.41 L 17.59 5 L 12 10.59 L 6.41 5 L 5 6.41 L 10.59 12 L 5 17.59 L 6.41 19 L 12 13.41 L 17.59 19 L 19 17.59 L 13.41 12 Z" /> <path fill="none" d="M 0 0 h 24 v 24 H 0 Z" /></svg></div>' +
        '<div id="chatbot"></div>' +
        "</div>" +
        "</div>" +
        "</div>";

    async function ConnectChatbot() {

        if (!browserSupported()) {
            document.getElementById("chatbot").innerHTML =
                '<div><div id="browser-warning"><br>Please use the latest version of Chrome, Edge, Firefox or Safari to use our Chatbot</div></div>';
            return;
        }

        var directLine;
        var webChat;
        var styleOptions = window.agileDatumChatbotConfig.defaultStyleOptions;
        var customStyleOptions = window.agileDatumChatbotConfig.customStyleOptions;

        // apply the customisation...
        for (var option in customStyleOptions) {
            if (customStyleOptions.hasOwnProperty(option)) {
                styleOptions[option] = customStyleOptions[option];
            }
        }

        const store = window.WebChat.createStore({},
            ({ dispatch }) => next => action => {
                if (action.type === "DIRECT_LINE/CONNECT_FULFILLED") {
                    setCookie("conversationId", directLine.conversationId);
                    setCookie("streamUrl", directLine.streamUrl);
                    setCookie("token", window.agileDatumChatbotAuth.token);
                    setCookie("userID", window.agileDatumChatbotAuth.userID);
                    // When we receive DIRECT_LINE/CONNECT_FULFILLED action, we will send an event activity using WEB_CHAT/SEND_EVENT
                    dispatch({
                        type: "WEB_CHAT/SEND_EVENT",
                        payload: {
                            name: "webchat/join",
                            value: { language: window.navigator.language }
                        }
                    });
                    showOrHideChatInput(true, false);
                }

                return next(action);
            });

        // Check for conversation in cookie.
        const conversationId = getCookie("conversationId");

        // Use cookie data stored to load conversation data and do not render the welcome message...

        if (!IsValueInEmpty(conversationId) && allowCookies) {
            window.agileDatumChatbotAuth.userID = getCookie("userID");

            directLine = new window.WebChat.createDirectLine({
                token: getCookie("token"),
                streamUrl: getCookie("streamUrl"),
                conversationId: conversationId,
                watermark: "0",
                webSocket: false
            });

            webChat = {
                directLine: directLine,
                userID: window.agileDatumChatbotAuth.userID,
                styleOptions
            };

        } else { // Create new connection and show welcome message...
            directLine = new window.WebChat.createDirectLine({
                token: window.agileDatumChatbotAuth.token,
                webSocket: false
            });

            webChat = {
                directLine: directLine,
                userID: window.agileDatumChatbotAuth.userID,
                styleOptions,
                store
            };
        }

        window.WebChat.renderWebChat(webChat, document.getElementById("chatbot"));
   
        // add accessibility feature...
        const hiddentext = document.createElement("span");
        document.querySelector('#webchat button[title="Send"]').appendChild(hiddentext);
        hiddentext.outerHTML = '<span style="display:none">Send message</span>';

        // Subscribing to connectionStatus of DirectLine enables listening for ConnectionStatus.
        // Online which is fired after ConnectionStatus.ExpiredToken.Then, update the cookie:
        // https://stackoverflow.com/questions/52516124/store-refresh-token-in-a-cookie
        // https://github.com/microsoft/BotFramework-DirectLineJS
        directLine.connectionStatus$
            .subscribe(connectionStatus => {
                switch (connectionStatus) {
                    // the status when the DirectLine object is first created/constructed
                case ConnectionStatus.Uninitialized:
                    console.log("Connection Status: Uninitialized");
                    break;

                // currently trying to connect to the conversation
                case ConnectionStatus.Connecting:
                    console.log("Connection Status: Connecting");
                    showOrHideChatInput(false, false);
                    break;

                // successfully connected to the conversation. Connection is healthy so far as we know.
                // now show UI for chatbot messages.
                case ConnectionStatus.Online:
                    console.log("Connection Status: Online");
                    break;

                // last operation had an error with an expired token. Your app should supply a new one.
                case ConnectionStatus.ExpiredToken:
                    console.log("Connection Status: ExpiredToken");
                    setCookie("conversationId", "");
                    showTimeOutMessage();
                    break;

                // the initial attempt to connect to the conversation failed. No recovery possible.
                case ConnectionStatus.FailedToConnect:
                    console.log("Connection Status: FailedToConnect");
                    break;

                // the bot ended the conversation
                case ConnectionStatus.Ended:
                    console.log("Connection Status: Ended");
                    break;
                }
            });

        document.querySelector("#chatbot > *").focus();
    }

    function showOrHideChatInput(isVisible, isChatEnded) {
        const inputForm = document.querySelector('#webchat .main form');
        const inputMain = document.querySelector('#webchat .main');

        inputForm.style.height = null;
        inputMain.style.visibility = null;

        if (!isVisible) {
            inputForm.style.height = "31px";
            if (isChatEnded) {
                inputForm.style.height = "0";
            }
            inputMain.style.visibility = "hidden";
        }
    }

    function showTimeOutMessage() {
        const htmlMsg = '<svg width="50px" height="50px" viewBox="0 0 200 191" version="1.1" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"  style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">' +
            '    <g transform="matrix(4.63158,0,0,4.28947,-20.4211,-18.0263)">' +
            '        <path d="M26,7L45,45L7,45L26,7Z" style="fill:rgb(255,211,0);stroke:rgb(219,142,0);stroke-width:3.36px;"/>' +
            '    </g>' +
            '    <g transform="matrix(133.116,0,0,133.116,78.247,156.912)">' +
            '        <path d="M0.113,-0.31L0.097,-0.544C0.094,-0.59 0.093,-0.622 0.093,-0.642C0.093,-0.669 0.1,-0.69 0.114,-0.705C0.128,-0.72 0.147,-0.728 0.17,-0.728C0.198,-0.728 0.217,-0.718 0.226,-0.699C0.236,-0.68 0.24,-0.652 0.24,-0.615C0.24,-0.594 0.239,-0.572 0.237,-0.55L0.216,-0.309C0.214,-0.28 0.209,-0.258 0.201,-0.243C0.194,-0.228 0.181,-0.22 0.164,-0.22C0.146,-0.22 0.134,-0.228 0.127,-0.242C0.121,-0.257 0.116,-0.28 0.113,-0.31ZM0.167,-0.011C0.147,-0.011 0.13,-0.018 0.115,-0.031C0.1,-0.043 0.093,-0.061 0.093,-0.085C0.093,-0.105 0.1,-0.122 0.114,-0.136C0.128,-0.15 0.146,-0.157 0.166,-0.157C0.187,-0.157 0.204,-0.15 0.219,-0.136C0.233,-0.122 0.24,-0.105 0.24,-0.085C0.24,-0.062 0.233,-0.044 0.218,-0.031C0.204,-0.018 0.187,-0.011 0.167,-0.011Z" style="fill:rgb(68,35,0);fill-rule:nonzero;"/>' +
            '    </g>' +
            '</svg>'+
            '<div style="padding:5px 10px;color:#000">Your Chatbot session has ended, please refresh the page to start again.</div>';
        document.querySelector('#webchat .main').innerHTML=htmlMsg;
    }

    function LastWebChatUIChanges() {
        const header = document.createElement("div");
        const headerLogo = document.createElement("div");
        const title = document.createElement("div");

        headerLogo.id = "chatbot-header-logo";

        title.id = "chatbot-title";
        title.textContent = window.agileDatumChatbotConfig.defaultStyleOptions.title;

        header.id = "chatbot-header";
        header.ClassName =
            "css-gtdio3 css-mfy564 css-y1c0xs css-ca0rlf"; // Will probably change with each new BotFramework update

        header.appendChild(headerLogo);
        header.appendChild(title);

        const chatbot_stuff = document.getElementById("chatbot").childNodes[0];
        chatbot_stuff.insertBefore(header, chatbot_stuff.childNodes[0]);

        const footer = document.createElement("div");
        const footerLogo = document.createElement("div");
        footerLogo.id = "chatbot-avatar";
        footerLogo.innerHTML = '<a href="https://www.agileapplications.co.uk" target="agil_datum"><div id="chatbot-poweredby">Powered by</div><div id="chatbot-avatar-image"></div></a> ';
        footer.id = "chatbot-footer";
        footer.appendChild(footerLogo);
        chatbot_stuff.appendChild(footer);
    }

    // Create functions to open and close the chatbot
    const windowCloseClick = function() {
        const app = document.querySelector("#webchat");
        const bubble = document.querySelector("#chat-button");

        app.style.height = app.style.height === "0%" ? "100%" : "0%";
        app.style.transition = "height 0.15s ease-out";

        bubble.style.bottom = bubble.style.bottom === "20px" ? "-60px" : "20px";
        bubble.style.transition = "bottom 0.25s ease-in";
        bubble.style.height = bubble.style.height === "60px" ? "0%" : "60px";
    };
    const windowClose = document.getElementById("webchat-close");
    windowClose.tabIndex = 0;
    windowClose.onkeydown = function(e) {
        if(e.key) {
            if(e.key == 'Enter') {
                chatButtonClick();
            }
        }
    };
    windowClose.onclick = windowCloseClick;


    const chatButtonClick = function() {
        const app = document.querySelector("#webchat");
        const bubble = document.querySelector("#chat-button");

        app.style.height = app.style.height === "100%" ? "0%" : "100%";
        app.style.transition = "height 0.25s ease-in";

        bubble.style.bottom = bubble.style.bottom === "-60px" ? "20px" : "-60px";
        bubble.style.transition = "bottom 0.15s ease-out";
        bubble.style.height = bubble.style.height === "0%" ? "60px" : "0%";

        // Only connect the chatbot if the user has pressed the chatbot icon.
        if (!chatbotActive) {
            chatbotActive = true;
            ConnectChatbot().catch(err => console.error(err));
            LastWebChatUIChanges();

        }
    };
    const chatButton = document.getElementById("chatbot-message-avatar-image");
    chatButton.tabIndex = 0;
    chatButton.onkeydown = function(e) {
        if(e.key) {
            if(e.key == 'Enter') {
                chatButtonClick();
            }
        }
    };
    chatButton.onclick = chatButtonClick;
};