async function setClipboard(text) {
  const type = "text/plain";
  const blob = new Blob([text], { type });
  const data = [new ClipboardItem({ [type]: blob })];
  await navigator.clipboard.write(data);
}

async function go() {
  const data = await (await fetch('emoji_metadata.json')).json();
  console.log(data);

  const form = document.getElementById('search-form');

  const results_body = document.querySelector('#results tbody');
  
  form.addEventListener('input', () => {
    const fd = new FormData(form);
    const params = Object.fromEntries(fd);
    update_search(params);
  })

  function update_search({query}) {
    const matches = data.filter(d => {
      const desc = [d.description].concat(d.aliases).join(' ').toLowerCase();
      return desc.includes(query.toLowerCase());
    })
    console.log(matches);

    results_body.innerHTML = '';
    for(let d of matches) {
      const tr = document.createElement('tr');
      results_body.append(tr);
      tr.innerHTML = `<td class="emoji">${d.emoji}</td><td>${d.description}</td><td>${d.aliases.join(', ')}`;
    }
  
  }

  results_body.addEventListener('click', e => {
    console.log(e.target);
    if(!e.target.classList.contains('emoji')) {
      return;
    }
    setClipboard(e.target.textContent);
    
  })
}

go();