var users = [...new Set(tyk.map((t) => t.name))];
var repos = [...new Set(tyk.map((t) => t.repo))];
const headers = ["Name", "Repo", "Commits", "Alignment"];

function calcAlignment(morality, licitness, threshold=0.3) {
    let good = morality > threshold
    let lawful = licitness > threshold
    let evil = morality < -threshold
    let chaotic = licitness < -threshold
    if (!evil && !good && !lawful && !chaotic) {
	return "True Neutral"
    }
    var format
    if (lawful) format = "Lawful "
    if (chaotic) format = "Chaotic "
    if (!format) format = "Neutral "

    if (good) {
	format += "Good 😇"
    } else if (evil) {
	format += "Evil 😈"
    } else {
	format += "Neutral 🙊"
    }
    return format
}

function createTable(results) {
    let table = document.createElement('table')
    let thead = document.createElement('thead')
    let theadRow = document.createElement('tr')
    headers.forEach(header => {
	let th = document.createElement('th')
	th.innerText = header
	theadRow.append(th)
    })
    thead.append(theadRow)
    table.append(thead)
    let tbody = document.createElement('tbody')
    table.append(tbody)

    for (let result of results) {
	let row = tbody.insertRow();
	let name = row.insertCell()
	name.appendChild(document.createTextNode(result['name']))
	let repo = row.insertCell()
	repo.appendChild(document.createTextNode(result['repo']))
	let commits = row.insertCell()
	commits.style.textAlign = "right"
	commits.appendChild(document.createTextNode(result['commits']))
	let alignment = row.insertCell()
	let a = calcAlignment(result['morality'], result['licitness'])
	alignment.appendChild(document.createTextNode(a))
	row.append(name, repo, commits, alignment)
    }
    return table
}

function displayResults(results) {
    let selectionDiv = document.querySelector("div.selection")
    while (selectionDiv.firstChild) selectionDiv.removeChild(selectionDiv.firstChild)
    selectionDiv.append(createTable(results))
}

new autoComplete({
    selector: "#autoComplete",
    placeHolder: "Search by name or repo...",
    data: {
	src: [...users, ...repos]
    },
    resultsList: {
	noResults: (list, query) => {
	    // Create "No Results" message list element
	    const message = document.createElement("li");
	    message.setAttribute("class", "no_result");
	    // Add message text content
	    message.innerHTML = `<span>Found No Results for "${query}"</span>`;
	    // Add message list element to the list
	    list.appendChild(message);
	},
    },
    onSelection: (feedback) => {
	document.querySelector("#autoComplete").blur();
	// Prepare User's Selected Value
	const selection = feedback.selection.value;
	console.debug(`Selected ${selection}`)
	displayResults(tyk.filter(r => r.name.includes(selection) || r.repo.includes(selection)))
	// Replace Input value with the selected value
	document.querySelector("#autoComplete").value = selection;
	// Console log autoComplete data feedback
	console.log(feedback);
    },
    resultItem: {
	highlight: {
	    render: true
	}
    }
});