const MINIMUM_NEEDLE_LENGTH = 3;
const CANVAS = document.create


// keresés indítása a nevek között
function search_in_names(needle) {
    let hintbox = document.getElementById("hintbox");

    if (needle.length < 3) {
        hintbox.innerHTML = "";
    }

    if (needle.trim().length < MINIMUM_NEEDLE_LENGTH) {
        return;
    }

    request({
        action: "search",
        needle: needle
    }).then(resp => {
        hintbox.innerHTML = "";
        let hits = JSON.parse(resp);
        console.log(hits);
        hits.forEach((key, val) => {
            if (needle.length < 3) {
                return;
            }

            let hit = document.createElement("span");
            hit.classList.add("hit");

            let name_node = document.createElement("span");
            name_node.classList.add("name");

            let hp = key["hitpos"];
            let name = key["name"];

            if (hp > 0) {
                let name_begin = name.slice(0, hp);
                name_node.appendChild(document.createTextNode(name_begin));
            }

            let hl = document.createElement("span");
            hl.classList.add("highlight");
            hl.innerText = name.slice(hp, hp + needle.length);
            name_node.appendChild(hl);

            if (hp + needle.length < name.length) {
                let name_end = name.slice(hp + needle.length, name.length);
                name_node.appendChild(document.createTextNode(name_end));
            }

            hit.appendChild(name_node);

            let group = document.createElement("span");
            group.innerText = `(${key["group"]})`;
            group.classList.add("group");
            hit.appendChild(group);

            hintbox.appendChild(hit);
        });
    });
}