/**
 *
 */
(function() {

    let script = document.currentScript;

    const account = '0a0cd215-a537-45f5-abaf-04e0d059514d';

    if (!script && !account) {
        return;
    }

    /**
     * Chatbot window elements.
     *
     * @type {*}
     */
    const chatBotFrame = createChatElement('iframe', null,
        {
            "background": "none",
            "border": "0px",
            "float": "none",
            "height": "100%",
            "inset": "0px",
            "margin": "0px",
            "min-height": "0px",
            "padding": "0px",
            "pointer-events": "all",
            "position": "absolute",
            "width": "100%"
        },
        {
            "id": "chat-bot-frame",
            "allow": "autoplay; camera; microphone",
            "src": `https://widget.botgeniusconsultants.ai/app/${account}?ctrl=true`
        }
    );

    const chatBotWindow = createChatElement('div', null,
        {
            "border": "0px",
            "border-radius": "15px",
            "box-shadow": "rgba(0, 0, 0, 0.16) 0px 5px 40px",
            "background-color": "transparent",
            "pointer-events": "none",
            "z-index": "2147483639",

            "height": "min(700px, 100% - 120px)",
            "max-height": "100%",
            "min-height": "80px",

            "overflow": "hidden",

            "width": "calc(100% - 40px)",
            "max-width": "400px",

            "position": "fixed",
            "bottom": "100px",
            "right": "20px",

            "transform-origin": "right bottom",
            "transition": "width 200ms ease 0s, height 200ms ease 0s, max-height 200ms ease 0s, transform 200ms cubic-bezier(0, 1.2, 1, 1) 0s, opacity 83ms ease-out 0s, max-width 200ms ease 0s",
            "transform": "scale(0)",
            "opacity": "0",

            "-webkit-user-select": "none",
            "-moz-user-select": "none",
            "-ms-user-select": "none",
            "user-select": "none"
        },
        {
            "id": "chat-bot-window"
        },
        [
            chatBotFrame
        ]
    );

    /**
     * Responsive styles for our chatbot.
     *
     * @type {HTMLStyleElement}
     */
    const styleContainer = document.createElement('style');

    styleContainer.innerHTML =
        'div#chat-bot-button * {' +
            'font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";' +
            'font-size: 14px;' +
            'line-height: 18px;' +
            'user-select: none;' +
            '-webkit-user-select: none;' +
        '}' +

        '@media only screen and (min-width: 769px) {' +

            'div#chat-bot-button {' +
                'border-radius: 15px;' +
                'height: 60px;' +
                'width: 350px;' +
            '}' +

            'div#chat-bot-button img {' +
                'border-radius: 50%;' +
                'height: 40px;' +
                'margin: 10px;' +
                'max-width: 40px;' +
                'width: 100%;' +
            '}' +

            'div#chat-bot-button:hover { transform: scale(1.02)!important; }' +
            'div#chat-bot-button:active { transform: scale(0.98)!important; }' +

            'div.theme-03 { max-width: 325px; }' +
            'div.theme-03 #status span { top: -5px!important; right: -5px!important; }' +
        '}' +

        '@media only screen and (max-width: 768px) {' +

            'div#chat-bot-button {' +
                'border-radius: 50%;' +
                'height: 60px;' +
                'width: 60px;' +
            '}' +

            'div#chat-bot-button img {' +
                'border-radius: 50%;' +
                'height: 60px;' +
                'margin: 0;' +
                'width: 60px;' +
            '}' +

            'div#status span {' +
                'position: absolute;' +
                'right: 0!important;' +
                'top: 0!important;' +
            '}' +

            'div#chat-button-details {' +
                'display: none;' +
            '}' +

            'div#chat-bot-button:hover { transform: scale(1.1)!important; }' +
            'div#chat-bot-button:active { transform: scale(0.9)!important; }' +

            'div.theme-03 #status span { top: -10px!important; right: -10px!important; }' +
        '}' +

        '@keyframes pulse {' +

            '0% {' +
                'box-shadow: 0 0 0 0 rgba(15, 150, 15, 0.4);' +
            '}' +

            '70% {' +
                'box-shadow: 0 0 0 10px rgba(15, 150, 15, 0);' +
            '}' +

            '100% {' +
                'box-shadow: 0 0 0 0 rgba(15, 150, 15, 0);' +
            '}' +
        '}';

    /**
     * Chatbot button elements.
     *
     * @type {*}
     */
    const chatAvatar = createChatElement('img', null,
        {
            "-o-object-fit": "cover",
            "object-fit": "cover",
        },
        {
            src: 'https://dashboard.botgeniusconsultants.ai/storage/profile-photos/mNunFn7PjbuTBdVnoXvMoSlnKwXZMF53j0mX1ynB.jpg',
            title: 'Chat with CBD American Shaman',
            alt: 'CBD American Shaman Image',
        }
    );

    const chatDetailsName = createChatElement('span', null,
        {
            "display": "block",
            "overflow": "hidden",
            "text-overflow": "ellipsis",
            "white-space": "nowrap",
        },
        {
            "innerHTML": "Chat with CBD American Shaman"
        });

    const chatDetailsStatusMessage = createChatElement('span', null,
        {
            "display": "block",
            "font-size": "12px",
            "opacity": "0.8",
            "overflow": "hidden",
            "text-overflow": "ellipsis",
            "white-space": "nowrap",
        },
        {
            "innerText": 'Typically responds in less than a minute'
        }
    );

    const chatDetails = createChatElement('div', 'chat-button-details',
        {
            "flex": "1",
            "overflow": "hidden",
            "padding": "12px 12px 12px 5px",
            "position": "relative",
        },
        {},
        [
            chatDetailsName,
            chatDetailsStatusMessage
        ]
    );

    const statusIcon = createChatElement('span', null,
        {
            "animation": "pulse 2s ease-in-out infinite",
            "background": "rgb(15, 150, 15)",
            "border-radius": "50%",
            "height": "15px",
            "position": "absolute",
            "right": "15px",
            "top": "23px",
            "width": "15px",
        }
    );

    const chatStatus = createChatElement('div', 'status',
        {
            "max-width": "50px",
            "width": "100%",
        },
        {
            "title": 'Online'
        },
        [
            statusIcon
        ]
    );

    const toggleButton = createChatElement('div', 'chat-bot-button',
        {
            "background": "#FFFFFF",
            "border": "0px",
            "bottom": "20px",
            "-webkit-box-shadow": "0 0 50px 5px rgba(0, 0, 0, 0.30)",
            "-moz-box-shadow": "0 0 50px 5px rgba(0, 0, 0, 0.30)",
            "box-shadow": "0 0 50px 5px rgba(0, 0, 0, 0.30)",
            "cursor": "pointer",
            "display": "flex",
            "opacity": "0",
            // "overflow": "hidden",
            "position": "fixed",
            "right": "20px",
            "transform": "scale(1)",
            "transform-origin": "center center",
            "transition": "transform 167ms cubic-bezier(0.33, 0, 0, 1) 0s, " +
                "opacity 1s cubic-bezier(0.33, 0, 0, 1) 0s",
            "z-index": "2147483639",
        },
        {

        },
        [
            chatAvatar,
            chatDetails,
            chatStatus
        ]
    );


    /**
     * Style adjustments for Notification theme.
     */

    

    /**
     * Add our chat components to the current site.
     */
    document.querySelector('body').appendChild(styleContainer);
    document.querySelector('body').appendChild(chatBotWindow);
    document.querySelector('body').appendChild(toggleButton);

    /**
     *
     */
    let hasInitiated = false;

    /**
     * Handle click event for toggling chat window.
     */
    toggleButton.addEventListener('click', toggleChatBotWindow);

    /**
     * Chat window toggle functionality.
     */
    function toggleChatBotWindow()
    {
        if (!hasInitiated) {
            chatBotFrame.contentWindow.postMessage('do-chat-init', '*');
            hasInitiated = true;
        }

        chatBotWindow.classList.toggle('show-chat');

        if (chatBotWindow.classList.contains('show-chat')) {
            chatBotWindow.style.opacity = "1";
            chatBotWindow.style.transform = 'scale(1)';
        }

        if (!chatBotWindow.classList.contains('show-chat')) {
            chatBotWindow.style.opacity = "0";
            chatBotWindow.style.transform = 'scale(0)';
        }
    }

    /**
     * Simulate loading delay, fade button in.
     */
    setTimeout(() => {
        toggleButton.style.opacity = "1";
    }, 100);

    /**
     * Handle comms between our app and the client site.
     *
     * @param evt
     */
    function handleComms (evt) {

        if (evt.source === chatBotFrame.contentWindow && evt.data === 'do-expansion') {
            fireEvent('expand');
            chatBotWindow.style.height = 'calc(100% - 120px)';
            chatBotWindow.style.maxWidth = '800';
        }

        if (evt.source === chatBotFrame.contentWindow && evt.data === 'do-contraction') {
            fireEvent('contract');
            chatBotWindow.style.height = 'min(700px, 100% - 120px)';
            chatBotWindow.style.maxWidth = '400';
        }

        if (evt.source === chatBotFrame.contentWindow && evt.data === 'do-close') {
            fireEvent('close');
            toggleChatBotWindow();
        }

        if (evt.source === chatBotFrame.contentWindow && evt.data === 'do-open') {
            fireEvent('open');
            toggleChatBotWindow();
        }

        if (evt.source === chatBotFrame.contentWindow && evt.data === 'do-click') {
            fireEvent('send');
        }

        if (evt.source === chatBotFrame.contentWindow && evt.data === 'do-input') {
            fireEvent( 'message');
        }
    }

    /**
     * Fire events for ConvertCart tracking.
     * @param event
     * @param detail
     */
    function fireEvent(detail) {

        const convertCartEvent = new CustomEvent('ConvertCart', {
            detail: detail
        });

        window.dispatchEvent(convertCartEvent);
    }

    if (window.addEventListener) {
        window.addEventListener("message", handleComms, false);
    } else {
        window.attachEvent("onmessage", handleComms);
    }

    /**
     * Constructs an element of our chat widget.
     *
     * @param type
     * @param id
     * @param styles
     * @param attributes
     * @param children
     * @returns {*}
     */
    function createChatElement(type, id, styles, attributes = {}, children = []) {

        const element = document.createElement(type);

        if (id) element.id = id;
        if (styles) Object.assign(element.style, styles);

        for (const [key, value] of Object.entries(attributes)) {
            if (type === 'style') console.log(attributes);
            element[key] = value;
        }

        children.forEach(child => element.appendChild(child));

        return element;
    }

})();