var gCurrentDisplayedTag = null;

function displayTags($container, setupTableFunc) {
    // add vertical buttons
    $("#" + getCurrentPanelName() + "Panel").data("vp3-setup-func", setupTableFunc);
    var $body = $("<tbody>");
    $("<table/>")
        .append($body)
        .appendTo($container);
    insertTagButton($body, "[All]");
    $.getJSON(formatEndpoint(getPersonalityUrl() + "/tags"), function(data) {
        $.each(data, function(index, name) {
            insertTagButton($body, name);
        });
        if (canUpdateDB()) {
            insertTagButton($body, "[Deleted]");
            var $tr = $("<tr/>").appendTo($body);
            var $addTag = $("<input size='6' class='addTag ui-corner-all' placeholder='Add Tag'>").appendTo($tr);
            $addTag.keydown(function(event) {
                if (event.which == $.ui.keyCode.ENTER) {
                    if ($addTag.val()) {
                        addTag($body, $addTag.val());
                        $addLTag.val("");
                    }
                }
            });
        }
        alignTags($body);
    });
}

function addTag($body, tagName) {
    $.ajax({
        url: formatEndpoint(getPersonalityUrl() + "/tags/" + encodeURIComponent(tagName)),
        type: "PUT",
        success: function() {
            insertTagButton($body, tagName);
            alignTags($body);
            showInfo("Tag '" + tagName + "' created successfully");
        },
        error: function(jqXHR, textStatus, errorThrown) {
            showError("Tag not created: " + textStatus + "- " + errorThrown);
        }
    });
}

function insertTagButton($body, text) {
    var $addInput = $body.find(".addTag");
    var $tr;
    if ($addInput.length > 0) $tr = $("<tr/>").insertBefore($addInput.closest("tr"));
    else $tr = $("<tr/>").appendTo($body);
    $button = $("<button/>")
        .appendTo($tr)
        .button({label: text});
    $button.click(function() {
        redisplayEntities($(this).text());
    });
    if (text.charAt(0) != "[")
        $button.droppable({
            hoverClass: "ui-state-error",
            tolerance: "pointer",
            accept: ".draggableName",
            drop: function(event, ui) {
                var entityName = ui.draggable.text();
                var entityKey = $(ui.draggable).attr("vp3-key");
                var tagName = $(this).text();
                $.ajax({
                    url: formatEndpoint(getPersonalityUrl() + "/tags/" + encodeURIComponent(tagName) + "/" + entityKey),
                    type: "PUT",
                    success: function() {
                        showInfo("'" + entityName + "' added to tag '" + tagName + "'");
                        addTagToEntityRow($(ui.draggable).closest("tr"), tagName);
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        showError("Cannot update tag " + tagName + ": " + textStatus + "- " + errorThrown);
                    }
                });
            }
        });
}

function alignTags($body) {
    var maxWidth = Math.max.apply(
        null,
        $body
            .find(".ui-button,.addTag")
            .map(function() {
                return $(this).width();
            })
            .get()
    );
    $body.find(".ui-button,.addTag").css({width: maxWidth + "px"});
}

function redisplayEntities(tagName) {
    if (!tagName) tagName = gCurrentDisplayedTag;
    if (!tagName) tagName = "[All]";

    gCurrentDisplayedTag = tagName;

    var entities = getCurrentPanelName();
    var xmlUrl = getPersonalityUrl() + "/" + entities;
    let xmlUrlParams = tagName != "[All]" ? "tag=" + encodeURIComponent(tagName) : undefined;
    var xsltUrl = "/html/" + entities + ".xslt";
    // show spinner
    var $container = $("#" + entities + "Table").parent();
    $container.html('<div><img style="margin: 0 auto;" src="/images/circle-loader.gif" /></div>');
    $.when($.get(formatEndpoint(xmlUrl, xmlUrlParams)), $.get(xsltUrl)).then(
        function(data, styleSheet) {
            var newDoc = xslTransform(data[0], styleSheet[0], "isGuest", "no");
            $container.html(
                $(newDoc)
                    .find("#" + entities + "Table")
                    .parent()
                    .html()
            );
            setupTableFunc = $("#" + entities + "Panel").data("vp3-setup-func");
            setupTableFunc();
        },
        function(s) {
            showError("An AJAX error occured: " + s.statusText);
        }
    );
}

function addTagToEntityRow($row, tagName) {
    var $div = $row.find(".tags");
    var text = $div.text();
    if (text.indexOf(tagName) == -1) {
        if (text) text += ",";
        text += tagName;
        $div.text(text);
    }
}

function setupDraggingOnTable() {
    if (!canUpdateDB()) return;
    $(".draggableName").draggable({
        helper: function(event) {
            return $("<div class='ui-widget-header ui-corner-all'><h3>" + $(event.target).text() + "</h3></div>");
        },
        opacity: 0.75,
        scroll: true,
        cursor: "copy",
        revert: "invalid"
    });
    $(".draggableTag").draggable({
        helper: function(event) {
            return $("<div class='ui-widget-header ui-corner-all'><h3>" + $(event.target).text() + "</h3></div>");
        },
        stop: function(event, ui) {
            ui.helper.remove();
            var $target = $(event.target);
            var $nameCell = $target.closest("tr").find(".draggableName");
            var tagName = $target.text();
            var entityKey = $nameCell.attr("vp3-key");
            var entityName = $nameCell.text();
            $.ajax({
                url: formatEndpoint(getPersonalityUrl() + "/tags/" + encodeURIComponent(tagName) + "/" + entityKey),
                type: "DELETE",
                success: function() {
                    showInfo("'" + entityName + "' removed from tag '" + tagName + "'");
                    $target.remove();
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    showError("Cannot update tag " + tagName + ": " + textStatus + "- " + errorThrown);
                }
            });
        },
        opacity: 0.75,
        scroll: true,
        cursor: "move",
        revert: "false"
    });
}

/*
function removeLabelFromEntityRow ($row, labelName) {
	var $div = $row.find(".labels");
	var text = $div.text();
	if (text.indexOf(labelName) != -1) {
		var labels = text.split(",");
		labels.splice(labels.indexOf(labelName), 1);
		$div.text(labels.toString());
	}
}
*/