function addOrUpdateUrlParameter(url, key, value) {
    var urlObject = new URL(url);
    urlObject.searchParams.set(key, value);
    return urlObject.href;
}
function getUrlParameters() {
    var searchParams = new URLSearchParams(window.location.search);
    var params = {};

    // Iterate over each parameter and add to the 'params' object
    searchParams.forEach(function(value, key) {
      params[key] = value;
    });

    return params;
}

$(document).ready(function() {
    var params = getUrlParameters();
    // Make table rows clickable
    $(".visualization-table").hide();

    $(".table-wrapper tbody tr").click(function() {
        // Reset background color for all rows
        $(".table-wrapper tbody tr").css("background-color", "");

        // Change background color of the clicked row
        $(this).css("background-color", "#f0f0f0");

        $(".visualization-table").show();
        var grew_url = $(this).data("href");
        var subtree_hash = $(this).data("subtree-hash");
        var example_id = $(this).data("exid");
        var grew_link_text = $(this).data("grew-link-text");
        var other_examples_text = $(this).data("other-examples-text");
        var example_positions = $(this).data("expositions");
        var dir_name = window.location.pathname.split("/").pop()
        var other_examples = window.location.origin + '/stark/result/' + dir_name + '/' + subtree_hash;
        var url = window.location.origin + '/stark/visualization/' + dir_name + '/' + example_id + '/' + example_positions;
        $.ajax({url: url, success: function(result){
            var escapedHtml = `<pre><code class="conllu">${result['annodoc']}</code></pre>`;
            $(".visualization").html(escapedHtml);
            $('.visualization .conllu').each(function() {
              Annodoc.embedAnnotation($(this), Annodoc.parseConllU, Config.bratCollData);
            });
        }});
        if (grew_url == 'unknown') {
            $(".grew-link").html("/");
        } else {
            $(".grew-link").html("<a href=" + grew_url + " target='_blank'>" + grew_link_text + "</a>");
        }
        if (other_examples == 'unknown') {
            $(".other-examples").html("/");
        } else {
            $(".other-examples").html("<a href=" + other_examples + " target='_blank'>" + other_examples_text + "</a>");
        }
    });
    $(".close-visualization").click(function() {
        $(".visualization-table").hide();
        $(".table-wrapper tbody tr").css("background-color", "");
    });
    $(".th-desc").hide();
    $(".th-asc").hide();
    if ('order_by' in params) {
        if ('order_type' in params && params.order_type == 'desc') {
            $('th:contains(' + params.order_by + ') .th-desc').show();
        } else {
            $('th:contains(' + params.order_by + ') .th-asc').show();
        }
    }
    // Make table rows clickable
    $(".table-wrapper thead th").click(function(e) {
        var column_name = $(this).find('span:first').text();

        var newUrl = addOrUpdateUrlParameter(window.location.href, 'order_by', column_name);
        if ('order_by' in params && 'order_type' in params && params.order_by == column_name && params.order_type == 'desc') {
            newUrl = addOrUpdateUrlParameter(newUrl, 'order_type', 'asc');
        } else {
            newUrl = addOrUpdateUrlParameter(newUrl, 'order_type', 'desc');
        }



        // Redirect to the modified URL
        window.location.href = newUrl;
    });
});