import {
html,
render
} from 'https://unpkg.com/lit-html?module';

function solve() {
let cached = [];
document.querySelector('#searchBtn').addEventListener('click', onClick);
let inputField = document.getElementById("searchField")

let tbody = document.querySelector("tbody");
console.log(tbody)

//get data
let myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");

let requestOptions = {
method: 'GET',
headers: myHeaders,
redirect: 'follow'
};

fetch("http://localhost:3030/jsonstore/advanced/table", requestOptions)
.then(response => response.json())
.then(result => populateTable(Object.values(result)))
.catch(error => console.log('error', error));

function rowTemplate(r) {
return html `
<tr>
<td>${r.firstName} ${r.lastName}</td>
<td>${r.email}</td>
<td>${r.course}</td>
</tr>`
}

function populateTable(data) {
let rows = data.map(d => rowTemplate(d));
cached = data;
render(rows, tbody);
}

function onClick() {
let queryString = inputField.value;
if (queryString.length > 0 && queryString !== "") {
let differentLis = cached.map(r => (selRowTemplate(r, queryString)));
inputField.value = "";
render(differentLis, tbody);
}
}

function selRowTemplate(r, queryString) {
let rString = Object.values(r).join(" ")
return html `
<tr class=${rString.toLowerCase().includes(queryString)?"select":""}>
<td>${r.firstName} ${r.lastName}</td>
<td>${r.email}</td>
<td>${r.course}</td>
</tr>`
}
}

solve();