var avvhathtml = `

<div class="avchat-button">
<button class="avchat-open"><i class="fa-solid fa-user-astronaut"></i> </button>
<span class="avchat-badge"><i class="fa-solid fa-triangle-exclamation"></i></span>
</div>
<div class="avchat">
<div class="avchat-close">
    <button class="avchat-button-close"><i class="fa-solid fa-xmark"></i> </button>
</div>
<div class="avchat-resize">
    <button class="avchat-button-resize"><i class="fa-solid fa-maximize"></i> </button>
</div>
<div class="avchat-form-area">
  
    <div class="avchat_body">
        <div class="avchat_area">
            <div id="avchat_userblock" class="avchat_user_block">
                <div class="avchat_user_pic">
                    <i class="fa-solid fa-user"></i>
                </div>
                <div class="avchat_user_message"></div>
            </div>
            <div id="avchat_botblock" class="avchat_bot_block">
                <div class="avchat_bot_answer"></div>
                <div class="avchat_bot_pic">
                    <i class="fa-solid fa-user-astronaut"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="avchat_input">
    
    <div class="avchat_loader">
               
                    <i class="fa-solid fa-user-astronaut"></i>
               
                <div class="avchat_spinner"></div>
                </div>  
        <div class="avchat_message">
            <textarea name="message" rows="1" class="avchat_chatmessage"  
                required></textarea>
       
        <div class="avchat_submit">
            <button disabled type="submit" class="avchat_sendchatmessage"><i
                    class="fa-solid fa-paper-plane"></i> </button>
        </div>
        </div>
    </div>
</div>
</div>`;
$(document).ready(function () {
    var botblock;
    var userblock;
    var title = "GuestPost AI Assistant";
    var placeholder = "Enter your message*";
    var audio = new Audio("/public/audio/popup.wav");

    var chat_area;
    var lastmessage = 0;
    var messages = [];
    var messaging = true;
    var av_getMessagesInterval;
    $("body").append(avvhathtml);
    $(".avchat-form-area").prepend(
        '<div class="avchat-title">' + title + "</div>"
    );
    $(".avchat_chatmessage").attr("placeholder", placeholder);
    $(document).on("click", ".avchat-open", function () {
        if ($(".avchat").hasClass("show")) {
            $(".avchat").removeClass("show");
        } else {
            $(".avchat").addClass("show");
            $(".avchat-badge").hide();
        }
        $(".avchat-button").addClass("hide");
    });
    $(document).on("click", ".avchat-button-close", function () {
        $(".avchat").removeClass("show");
        $(".avchat").removeClass("fullsize");
        $(".avchat-button").removeClass("hide");
    });
    $(document).on("click", ".avchat-button-resize", function () {
        if ($(".avchat").hasClass("fullsize")) {
            $(".avchat").removeClass("fullsize");
        } else {
            $(".avchat").addClass("fullsize");
        }
    });
    $(document).on("click", ".avchat_sendchatmessage", function () {
        av_submitMessage();
    });
    $(document).on("keydown", ".avchat_chatmessage", function (e) {
        var code = e.keyCode ? e.keyCode : e.which;
        if (code == 13 && !e.shiftKey) {
            e.preventDefault();
            if ($(".avchat_chatmessage").val() != "") av_submitMessage();
        } else av_checkButton();
    });

    $(document).on("keyup", ".avchat_chatmessage", function (e) {
        var code = e.keyCode ? e.keyCode : e.which;
        if (code == 17 || code == 91 || code == 8 || code == 46) {
            av_checkButton();
        }
    });
    $(".avchat_chatmessage").click(function (e) {
        av_checkButton();
    });
    function av_setTask() {
        av_getMessagesInterval = setInterval(() => av_getMessages(), 3000);
    }
    function av_clearTask() {
        clearInterval(av_getMessagesInterval);
    }
    function av_checkButton() {
        if ($(".avchat_chatmessage").val() != "") {
            $(".avchat_sendchatmessage").prop("disabled", false);
            $(".avchat_sendchatmessage").show();
        } else {
            $(".avchat_sendchatmessage").prop("disabled", true);
            $(".avchat_sendchatmessage").hide();
        }
    }
    function av_submitMessage() {
        if (messaging == false) return;
        messaging = false;
        var message = $(".avchat_chatmessage").val();
        $(".avchat_chatmessage").val("");
        av_checkButton();
        var dt = new Date();
        var time = dt.getHours() + ":" + dt.getMinutes();
        mes = [];
        mes["role"] = "user";
        mes["message"] = message;
        mes["time"] = time;
        messages.push(mes);
        av_createMessage(mes);
        lastmessage = messages.length;
        
        $.ajaxSetup({
            headers: {
                "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")?$('meta[name="csrf-token"]').attr("content"):$('meta[name="_token"]').attr("content"),
            },
        });

        $.ajax({
            url: "/message",
            type: "POST",

            data: {
                message: message,
            },
            dataType: "json",
            success: function (res) {
                av_setTask();
                $(".avchat_loader").css("display", "flex");
                messaging = true;
                $(".avchat_sendchatmessage").prop("disabled", true);
            },
        });
    }
    function av_getMessages() {
        $.ajaxSetup({
            headers: {
                "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")?$('meta[name="csrf-token"]').attr("content"):$('meta[name="_token"]').attr("content"),
            },
        });
        $.ajax({
            url: "/messages",
            type: "POST",

            data: {
                lastmessage: lastmessage,
            },
            dataType: "json",
            success: function (res) {
                if (res.messages.length) {
                    audio.play();
                    if (!$(".avchat").hasClass("show")) {
                        $(".avchat-badge").show();
                    }
                }
                av_clearTask();
                res.messages.forEach((message) => {
                    messages.push(message);
                    lastmessage = messages.length;
                    av_createMessage(message);
                });
            },
        });
    }
    function av_createMessage(message) {
        botblock = $("#avchat_botblock").clone().removeAttr("id");
        userblock = $("#avchat_userblock").clone().removeAttr("id");
        chat_area = $(".avchat_area");
        if (message.role == undefined) return;
        if (message.role == "bot") {
            botblock.find(".avchat_bot_answer").first().html(message.message);
            chat_area.append(botblock);
        }
        if (message.role == "user") {
            user_message = userblock.clone();

            user_message
                .find(".avchat_user_message")
                .first()
                .html(message.message);

            chat_area.append(user_message);
        }
        $(".avchat_loader").css("display", "none");
        $(".avchat_body").scrollTop($(".avchat_area").height());
    }
    $(document).click(function () {
        av_setTask();
    });
});