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 selectedRowTemplate(r) {
      return html`
      <tr class="select">
      <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; 

      let differentLis = [];
      cached.forEach(r => {
         let rowTextContentArr=[r.firstName, r.lastName, r.email,r.course]
         let rowTextContent=rowTextContentArr.join(" ")
         if (rowTextContent.toLowerCase().includes(queryString.toLowerCase())) {
         
            differentLis.push(selectedRowTemplate(r))
         } else {
            differentLis.push(rowTemplate(r))
         }
      })
 
      inputField.value="";
      render(differentLis, tbody);     
   
   }
}

solve();