import { towns } from "./towns.js";
import { html, render } from 'https://unpkg.com/lit-html?module';
 
function search() {
   let button = document.querySelector("button")
   let input = document.getElementById("searchText");
 
 
   let townsDiv = document.getElementById("towns");
   function createTownTemplate(town) {
      return html`      
      <li>${town}</li>`
   }
 
   let townsLis = towns.map(t => createTownTemplate(t));
   let ul = document.createElement("ul");
   render(townsLis, ul);
   render(ul, townsDiv)
 
 
   button.addEventListener("click", function (e) {
      let matches = 0;
      let searchQuery = input.value;
 
      function createActiveLi(town) {
         return html`
             <li class="active">${town}</li>`
      }
  
      let differentLis = [];
      towns.forEach(t => {
         if (t.toLowerCase().includes(searchQuery.toLowerCase())) {
            matches++;
             differentLis.push(createActiveLi(t))
         } else {
            differentLis.push(createTownTemplate(t))
         }
      })
 
      render(differentLis, ul);
      render(ul, townsDiv);
      let resultDiv = document.getElementById("result");
      resultDiv.textContent = `${matches} matches found`;
   })
}
 
search()