const popup = document.querySelector('.chat-popup');
const chatBtn = document.querySelector('.chat-btn');
const submitBtn = document.querySelector('.submit');
const chatArea = document.querySelector('.chat-area');
const inputElm = document.querySelector('input');
const inMessage = '<div style="width:100%;display:inline-block;"><div class="income-msg animate__animated animate__opacity"><span class="msg" style="text-align:left;">{{MESSAGE}}</span></div></div>';
const inMessageTyping = '<div class="typing"><div class="animate__animated animate__opacity"><h1 class="ml6"><span class="text-wrapper"><span class="letters" style="font-size: 13px;font-style: italic;font-weight:400;">typing...</span></span></h1></div></div>';
const messages = document.getElementsByClassName("chat-area")[0]; //chat-area'ı aldım

$(document).ready(() => {
    var funqueue = [];
    var pending = false;
    var wrapFunction = function(fn, context, params) {
        return function() {
            fn.apply(context, params);
        };
    }

    function getBotResponse(rawText) {
        var userHtml = '<div style="width:100%;display:inline-block;"><div class="out-msg animate__animated animate__opacity"><span class="my-msg">' + rawText + '</span></div></div>';
        $(".chat-area").append(userHtml);
        var TypingHtml = inMessageTyping;
        $(".chat-area").append(TypingHtml);
        scrollToBottom();
        document.getElementById("textInput");
        var textWrapper = document.querySelector('.ml6 .letters');
        textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
        anime.timeline({
                loop: true
            })
            .add({
                targets: '.ml6 .letter',
                translateY: ["1.1em", 0],
                translateZ: 0,
                duration: 750,
                delay: (el, i) => 50 * i
            }).add({
                targets: '.ml6',
                opacity: 0,
                duration: 1000,
                easing: "easeOutExpo",
                delay: 1000
            });
        $.get("/get", {
            msg: rawText
        }).done(function(data) {
            $(".typing").remove();
            $(".typing").append(TypingHtml);

            var msg = data;
            var splittedMsg = msg.split(/ |\t|\n/);
            var shorten = '';
            splittedMsg.forEach(function(link){
                if (link.startsWith("http") || link.startsWith("www")){
                    if(link.includes("maps\/embed")){
                        replaceLink = '<iframe src="' + link + '" width="272" height="204" style="border:0;" allowfullscreen="" loading="lazy"></iframe>'
                        msg = msg.replace(link, replaceLink);
                    }
                    else{
                        shorten = link.substring(0, 50);
                        replaceLink = '<a href=' + link + ' target="_blank">' + shorten + '</a>' + '<br>';
                        msg = msg.replace(link, replaceLink);
                    }
                }
                else if (link.includes("@")){
                    replaceLink = '<br> For gmail: <a href="https://mail.google.com/mail/?view=cm&fs=1&tf=1&to=' + link + '" target="_blank">' + link + '</a>' + '<br>'
                    + 'For mail app: <a href="mailto:' + link + '" target="_blank">' + link + '</a>' + '<br>'
                    msg = msg.replace(link, replaceLink);
                }
            });
            
            var botHtml = inMessage.replace('{{MESSAGE}}', msg); //'<p class="msg"><span>' + data + "</span></p>";
            $(".chat-area").append(botHtml);
            document.getElementById("textInput");
            scrollToBottom(); //Bottan gelen mesajdan sonra fonksiyonu cagırıyorum
            if (funqueue.length <= 0) {
                pending = false;
            } else {
                (funqueue.shift())();
            }
        });
    }

    function scrollToBottom() { //scroll pozisyonunu ayarlıyorum
        messages.scrollTop = messages.scrollHeight;
        //scrollTop: kullanıcının yaptıgı scroll miktari
        //scrollHeight: total container boyutu
    }
    submitBtn.addEventListener('click', () => {
        var rawText = $("#textInput").val();
        $("#textInput").val("");
        var func = wrapFunction(getBotResponse, this, [rawText]);
        funqueue.push(func);
        if (funqueue.length == 1 && pending == false) {
            pending = true;
            (funqueue.shift())();
        }
    });
    $("#textInput").keypress(function(e) {
        var txt = $("#textInput").val();
        var withtrimtxt = txt.trim();
        if (withtrimtxt == "" || withtrimtxt == " ") {

        } else {
            if (e.which == 13) {
                var rawText = $("#textInput").val();
                $("#textInput").val("");
                var func = wrapFunction(getBotResponse, this, [rawText]);
                funqueue.push(func);
                if (funqueue.length == 1 && pending == false) {
                    pending = true;
                    (funqueue.shift())();
                }
            }
        }


    });

    // Wrap every letter in a span

});