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();