class Scroller {
    constructor(speed=2000) {
        this.speed = speed;
        this.canShowGodown = true;
    }

    isAtBottom(){
        var h = $("#scrollableDiv").prop('scrollHeight');
        return $("#scrollableDiv").scrollTop() + $("#scrollableDiv").height() >= h - 20;
    }

    down(){
        $("#godown").addClass("hidden");
        var h = $("#scrollableDiv").prop('scrollHeight');
        $("#scrollableDiv").animate({ scrollTop: h }, this.speed);
    }

    bottom(){
        var h = $("#scrollableDiv").prop('scrollHeight');
        $("#scrollableDiv").scrollTop(h);
    }
}

var converter = new showdown.Converter();
var scroller = new Scroller(true, 2000);
var question = "";
var xhr;

function bubbles(endpoint, reset, references, search, history, callback=undefined){
    function load_history(q){
        ask = true;

        var obj = jQuery.parseJSON(JSON.stringify(history));

        $.each(obj, function(key,value) {
            if (value.type == "HumanMessage")
                question_bubble = $('<div>', {class: 'box bubble-right', html: decodeURIComponent(value.content)});
                $("#conversation").append(question_bubble);
                if (unescapeHtml(value.content) == q){
                    ask = false;
                }
            if (value.type == "AIMessage"){
                bubble = $("<div>", {'class': "box bubble-left"}).appendTo("#conversation");
                chat = $("<div>").appendTo(bubble)
                refs = $('<div class="mt-1">').appendTo(bubble)

                $.each(value.context, function(ref, value) {
                    lnk = $('<a>',{class: "inline-block text-redis-ink-900 bg-redis-yellow-100 border border-redis-pen-300 no-underline hover:underline rounded-md px-1.5 pt-1 pb-1/2 m-1", text: value.title, title: value.title, href: ref, target: "_blank"}).appendTo(refs);
                });

                chat.html(addCodeCopyButton(sanitizeInput(converter.makeHtml(unescapeHtml(value.content)))));
            }
        });

        // Once the history is loaded, open all links in a new tab and scroll to bottom
        $('#conversation').find('a').attr('target', '_blank');
        hljs.highlightAll();
    }

    const urlParams = new URLSearchParams(window.location.search);
    q = urlParams.get('q');
    page = urlParams.get('page')==null?1:urlParams.get('page');
    load_history(q)
    scroller.bottom();
    if (q != null && q.trim().length){
        get_search(q, page);
        if (ask) {
            get_references(q);
            get_chat(q);
        }
    }
    var scrollableDiv = $("#scrollableDiv");
    scrollableDiv.scroll(function() {
        if(!scroller.isAtBottom() && scroller.canShowGodown) {
            $("#godown").removeClass("hidden");
        } else {
            $("#godown").addClass("hidden");
        }
    });

    $(window).on('resize', function() {
        if(!scroller.isAtBottom() && scroller.canShowGodown) {
            $("#godown").removeClass("hidden");
        } else {
            $("#godown").addClass("hidden");
        }
    });

    $("#chat-search-button").click(function(e){
        e.preventDefault();
        q = $(".footer-search-bar").val();
		$(".footer-search-bar").val('');
		$("#chat-search-button").prop("disabled", true);

        get_chat(q);
        get_references(q);
        get_search(q, 1);
        replaceQueryParam('q', q);
    });

    $("#reset").click(function(e){
        e.preventDefault();
        $.ajax({
            type: "POST",
            dataType: "json",
            url: reset,
            processData: true,
            success: function(data) {
            $(".box").fadeOut("slow", function() {
                $("#container").empty();
            });
            }
        });
    });

    $("#stop-button").click(function(e){
        e.preventDefault();
        if (xhr) {
            xhr.abort();
        }

        $("#chat-search-button").removeClass('hidden');
        $("#stop-button").addClass('hidden');
        $(".dot-flashing").hide();
    })

    $("input[type='checkbox']").change(function() {
        get_search(question);
    });

    function addCodeCopyButton(html){
        var newHtml = $(html);
        var htmlWrapped = $('<div>').append(newHtml);
        htmlWrapped.find("pre code").each(function(){
            var code = $(this).text();
            var buttonWrapper = $('<div>', {class: 'absolute top-0 right-0 group'});

            var button = $('<button>', {class: 'h-7 w-7 p-1 mt-2 mr-2 bg-slate-600 rounded-md text-neutral-400 hover:text-slate-100'}).click(function(){
                navigator.clipboard.writeText(code);
                var tooltip = $(this).siblings('.tooltip');

                tooltip.text('Copied!');
                setTimeout(function(){
                    tooltip.text('Copy code');
                }, 2000);
            });
            button.html('<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="currentColor"><path d="M9 43.95q-1.2 0-2.1-.9-.9-.9-.9-2.1V10.8h3v30.15h23.7v3Zm6-6q-1.2 0-2.1-.9-.9-.9-.9-2.1v-28q0-1.2.9-2.1.9-.9 2.1-.9h22q1.2 0 2.1.9.9.9.9 2.1v28q0 1.2-.9 2.1-.9.9-2.1.9Zm0-3h22v-28H15v28Zm0 0v-28 28Z"/></svg>');
            buttonWrapper.append(button);

            var tooltip = $('<div>', {class: 'tooltip pointer-events-none font-mono bg-neutral-900 text-white text-sm p-1 rounded-sm absolute -bottom-7 left-1/2 opacity-0 group-hover:opacity-100 transition-all ease-in-out duration-150 whitespace-nowrap overflow-visible'}).text('Copy code');
            buttonWrapper.append(tooltip);

            $(this).after(buttonWrapper);
        });

        return newHtml;
    }

    function get_chat(q){
		if ((q == null) || (q.trim().length == 0)){return;}
        //$( "#conversation" ).append('<div class="box bubble-right">' + q + '</box>');
        $("#conversation").append('<div class="box bubble-right"></div>');
        $("#conversation .box:last").html(safeText(q));
        bubble = $("<div>", {'class': "box bubble-left"}).appendTo("#conversation");
        dot = $("<div>", {'class': "dot-flashing"});
        chat = $("<div>").appendTo(bubble);
        refs = $('<div>').addClass('hidden').appendTo(bubble);
        dot.appendTo(chat);
        scroller.down();
        $("#chat-search-button").addClass('hidden');
        $("#stop-button").removeClass('hidden');
        replaceQueryParam('page', 1);
        replaceQueryParam('q', q);

        xhr = $.ajax({
            type: "POST",
            dataType: "text",
            timeout : 60000,
            url: endpoint,
            data : {q: encodeURIComponent(q)},
            processData: true,
            xhrFields: {
                onprogress: function(e)
                {
                    scroller.canShowGodown = false;
                    var response = e.currentTarget.response;
                    chat.html(addCodeCopyButton(sanitizeInput(converter.makeHtml(unescapeHtml(response)))));
                    hljs.highlightAll();
                    scroller.bottom();
                }
            },
            success: function(data) {
                $(document).ready(function(){$('#conversation').find('a').attr('target', '_blank');});
                $("#chat-search-button").removeClass('hidden');
                $("#stop-button").addClass('hidden');
                scroller.bottom();
                scroller.canShowGodown = true;
                // show contextual links only when the answer is complete
                refs.fadeIn(300);//.removeClass('hidden');

            },
            error: function(jqXhr, textStatus, errorMessage) {
                console.log(errorMessage);
                chat.append("<p>Your request has been interrupted</p>");
                $("#chat-search-button").removeClass('hidden');
                $("#stop-button").addClass('hidden');
                scroller.bottom();
                scroller.canShowGodown = true;
            },
        });
    }

    function get_references(q){
        $.ajax({
            type: "GET",
            dataType: "json",
            contentType: 'application/json',
            url: references,
            data : {q: encodeURIComponent(q)},
            processData: true,
            success: function(data) {
                var jsonData = JSON.parse(data);
                jsonData.forEach(function(ref){
                    lnk = $('<a>',{class: "inline-block text-redis-ink-900 bg-redis-yellow-100 border border-redis-pen-300 no-underline hover:underline rounded-md px-1.5 pt-1 pb-1/2 m-1", text: ref.title, title: ref.title, href: ref.url, target: "_blank"}).appendTo(refs);
                });
                scroller.bottom();
            }
        });
    }

    function get_search(q, page=1){
        if ((q == null) || (q.trim().length == 0)){return;}
        question = q.trim();
        var deselectedCheckboxValues = [];
        var deselectedCheckboxValues = $('#facets input:checkbox:not(:checked)').map(function () {
            return this.value;
        }).get();
        $.ajax({
            type: "GET",
            dataType: "json",
            contentType: 'application/json',
            url: search,
            //data : JSON.stringify({q:encodeURIComponent(q), page:page, tags:deselectedCheckboxValues}),
            data : {q:encodeURIComponent(q), page:page, tags:deselectedCheckboxValues.join(',')},
            processData: true,
            success: function(data) {
                $("#search").empty();
                if (data['data'].length>0){
                    $(".outcome").addClass("hidden");
                    data['data'].forEach(function(ref){
                        p = $('<p>');
                        $('<a>',{class: "text-redis-red-600 hover:underline hover-text-redis-red-500",text: ref.title, title: ref.title, href: ref.url, target: "_blank"}).appendTo(p);
                        $('<span />').addClass('summary').html(ref.content.substring(0, 300)).appendTo(p);
                        p.appendTo($("#search"));
                    });
                    $("#search").append(data['pagination']);
                }
                else {
                    $(".outcome").removeClass("hidden");
                }

                // update partial results in the faceted search box
                Object.entries(data['agg']).forEach(([key, value]) => {
                    $(`#${key}`).text(`${value}`);
                });

                $("a.page-link").click(function(e){
                    e.preventDefault();
                    var urlParams = new URLSearchParams($(this).attr("href"));
                    var q = urlParams.get('q');
                    var page = urlParams.get('page')==null?1:urlParams.get('page');
                    replaceQueryParam('page', page);
                    replaceQueryParam('q', q);
                    get_search(q, page)
                });
            },
            error: function(data) {
                console.log(data.responseText);
            }
        });
    }
}