function tag_selector_find(node) {
    while(node != document.body) {
        if(node.classList.contains("dynamic-tag-selector"))
            return node;
        node = node.parentNode;
    }
    return undefined;
}

function tag_selector_get(ts) {
    return ts.querySelector("input").value
      .split(",")
      .map(str => str.trim())
      .filter(str => str !== "");
}

function tag_selector_set(ts, values) {
    ts.querySelector("input").value = values.join(", ");
    tag_selector_update(ts);
}

function tag_selector_update(ts) {
    if(ts === undefined) return;
    const input_names = tag_selector_get(ts);

    /* Update visibility of selected tags */
    ts.querySelectorAll(".tags-selected .tag[data-name]").forEach(tag => {
        const visible = input_names.includes(tag.dataset.name);
        tag.style.display = visible ? "inline-block" : "none";
    });

    /* Update visibility of pool tags */
    ts.querySelectorAll(".tags-pool .tag[data-name]").forEach(tag => {
        const visible = !input_names.includes(tag.dataset.name);
        tag.style.display = visible ? "inline-block" : "none";
    });
}

function tag_selector_add(ts, id) {
    if(ts === undefined) return;

    let tags = tag_selector_get(ts);
    if(!tags.includes(id))
        tags.push(id);

    tag_selector_set(ts, tags);
}

function tag_selector_remove(ts, id) {
    if(ts === undefined) return;

    let tags = tag_selector_get(ts);
    tags = tags.filter(str => str !== id);

    tag_selector_set(ts, tags);
}

document.querySelectorAll(".dynamic-tag-selector").forEach(ts => {
    ts.style.display = "block";
    tag_selector_update(ts);
});
