const toFind = document.getElementById("toFind");
const tabQuery = browser.tabs.query({currentWindow: true});
const errHandler = document.getElementById("errorZone");
const listZone = document.getElementById("listZone");
const notFoundText = document.createTextNode("Search not found...");

document.getElementById("toFind").onkeypress = function(e){
    searchTabs();
}

document.addEventListener("click", (e) => {
    if (e.target.id != "toFind" && e.target.id != "listZone" ) {
        if (e.target.tagName == "IMG") {
            var parent = e.target.parentNode;
            loadSelTab(parseInt(parent.id));
        } else {
            loadSelTab(parseInt(e.target.id));
        }
    }
});

function logTabs(tabs) {
    var selection = [];

    clearNodes(listZone);
    if (toFind.value != "") {
        for (let tab of tabs) {
            var title = tab.title;
            if (title.toLowerCase().includes(toFind.value.toLowerCase())) {
                selection.push(tab);
            }
        }
        if (selection.length > 1) {
            for (let sel of selection) {
                icon = document.createElement("DIV");
                thumbnail = document.createElement("IMG");
                title = document.createElement("P");
                lineBreak = document.createElement("BR");
                titleText = document.createTextNode(sel.title);

                icon.id = sel.id;
                icon.className = "box";
                thumbnail.className = "thumbImg";
                thumbnail.src = sel.favIconUrl;
                title.className = "title";

                icon.appendChild(thumbnail);
                icon.appendChild(title);
                title.appendChild(titleText);
                listZone.appendChild(icon);
                listZone.appendChild(lineBreak);
            }
            errHandler.style.display = "none";
            clearNodes(errHandler);
        } else {
            if (selection[0] != undefined) {
                errHandler.style.display = "none";
                clearNodes(errHandler);
                loadSelTab(selection[0].id);
            } else {
                errHandler.style.display = "block";
                errHandler.appendChild(notFoundText);
            }
        }
    }
}

function loadSelTab(id) {
    browser.tabs.update(id, {
        active: true
    });
}

function clearNodes(targetNode) {
    while (targetNode.firstChild) {
        targetNode.removeChild(targetNode.firstChild);
    }
}

function searchTabs() { tabQuery.then(logTabs, onError); }
function onError(error) { console.log(`Error: ${error}`); }