document.addEventListener("DOMContentLoaded", function() {
    let jquery = document.createElement('script');
    jquery.type='text/javascript';
    document.body.appendChild(jquery);
    jquery.src='https\u003A\/\/bot.topsonnik.ru\/js\/jquery\u002D2.1.1.min.js';

    let link = document.createElement('link');
    link.rel='stylesheet';
    document.body.appendChild(link);
    link.href='https\u003A\/\/bot.topsonnik.ru\/css\/webchatbotmax.css';

    function addchat (){
        let btn = document.createElement('button');
        btn.classList.add('chatbot-toggler')
        btn.innerHTML='<span class="glyphicon glyphicon-send"></span><span class="glyphicon glyphicon-remove"></span>';
        document.body.appendChild(btn);
        let tooltip = document.createElement('div');
        tooltip.classList.add('chatbot-tooltip')
        tooltip.innerText='Онлайн-толкование снов';
        document.body.appendChild(tooltip);

        let chat = document.createElement('div');
        chat.classList.add('chatbot');
        chat.innerHTML='<header><h3>Бот-Толкователь снов</h3><span class="close-btn glyphicon glyphicon-remove"></span></header><ul class="chatbox"><li class="chat incoming"><span class="glyphicon glyphicon-education"></span>\
          <p>Здравствуйте!<br>Я бот-толкователь снов! Напишите мне описание вашего сна и в течение нескольких минут я составлю Вам его толкование (это бесплатно)</p></li></ul>\
         <div class="chat-input"><textarea placeholder="Введите описание сна.." spellcheck="false" required></textarea><span id="send-btn" class="glyphicon glyphicon-send"></span></div>';
        document.body.appendChild(chat);


        const chatbotToggler = document.querySelector(".chatbot-toggler");
        const chatbotTooltip = document.querySelector(".chatbot-tooltip");
        const closeBtn = document.querySelector(".close-btn");
        const chatbox = document.querySelector(".chatbox");
        const chatInput = document.querySelector(".chat-input textarea");
        const sendChatBtn = document.querySelector(".chat-input span");

        let userMessage = null; // Variable to store user's message
        const inputInitHeight = chatInput.scrollHeight;

        const createChatLi = (message, className) => {
            // Create a chat <li> element with passed message and className
            const chatLi = document.createElement("li");
            chatLi.classList.add("chat", `${className}`);
            let chatContent = className === "outgoing" ? `<p></p>` : `<span class="glyphicon glyphicon-education"></span><p></p>`;
            chatLi.innerHTML = chatContent;
            chatLi.querySelector("p").textContent = message;
            return chatLi; // return chat <li> element
        }

        const generateResponse = (chatElement) => {
            const API_URL = "https\u003A\/\/bot.topsonnik.ru\/newgenerationmax";
            const messageElement = chatElement.querySelector("p");

            $.ajax({
                url: API_URL,
                type: 'post',
                headers: {
                    "Content-Type": "application/json"
                },
                data: JSON.stringify({income: userMessage,ref:''}),
                dataType: 'json',
                beforeSend: function() {

                },
                complete: function() {
                    chatbox.scrollTo(0, chatbox.scrollHeight);
                },
                success: function(json) {
                    messageElement.innerHTML = json.message;
                },
                error: function() {
                    messageElement.classList.add("error");
                    messageElement.textContent = "Что-то пошло не по плану, попробуйте еще разок";
                }
            });
        }

        const handleChat = () => {
            userMessage = chatInput.value.trim(); // Get user entered message and remove extra whitespace
            if(!userMessage) return;

            // Clear the input textarea and set its height to default
            chatInput.value = "";
            chatInput.style.height = `${inputInitHeight}px`;

            // Append the user's message to the chatbox
            chatbox.appendChild(createChatLi(userMessage, "outgoing"));
            chatbox.scrollTo(0, chatbox.scrollHeight);

            setTimeout(() => {
                const incomingChatLi = createChatLi("Пару секунд...", "incoming");
                chatbox.appendChild(incomingChatLi);
                chatbox.scrollTo(0, chatbox.scrollHeight);
                generateResponse(incomingChatLi);
            }, 600);
        }

        chatInput.addEventListener("input", () => {
            // Adjust the height of the input textarea based on its content
            chatInput.style.height = `${inputInitHeight}px`;
            chatInput.style.height = `${chatInput.scrollHeight}px`;
        });

        chatInput.addEventListener("keydown", (e) => {
            // If Enter key is pressed without Shift key and the window
            // width is greater than 800px, handle the chat
            if(e.key === "Enter" && !e.shiftKey && window.innerWidth > 800) {
                e.preventDefault();
                handleChat();
            }
        });

        sendChatBtn.addEventListener("click", handleChat);
        closeBtn.addEventListener("click", () => document.body.classList.remove("show-chatbot"));
        chatbotToggler.addEventListener("click", () => document.body.classList.toggle("show-chatbot"));
        chatbotToggler.addEventListener("mouseover", () => chatbotTooltip.classList.toggle("chatbot-tooltip-show"));
        chatbotToggler.addEventListener("mouseout", () => chatbotTooltip.classList.toggle("chatbot-tooltip-show"));
    }

    setTimeout(addchat, 1000);
    function showchat() {
        if (!(document.body.classList.contains('show-chatbot'))) {
            document.body.classList.toggle('show-chatbot');
        }
    }
    function showtooltip() {
        const chatbotTooltip = document.querySelector(".chatbot-tooltip");
        if (!(chatbotTooltip.classList.contains('chatbot-tooltip-show'))) {
            chatbotTooltip.classList.toggle('chatbot-tooltip-show');
        }
    }
    setTimeout(showtooltip,5000);
    setTimeout(showchat,10000);

})