// Develop a TypeAhead input component that filters a dataset based on user entry. Implement a debounce mechanism to optimize performance by limiting the frequency of function execution during typing. Apply text processing logic to identify and visually highlight the specific substrings within the results that match the user's input.
//


// 3. text processing logic which ones...


let previousId = 0;
const inputEle = document.getElementById("search");
const divSuggestion = document.getElementById("suggestion");
const tries = {}
const userNames = [
  "Ephemeral",
  "Mellifluous",
  "Ubiquitous",
  "Voracious",
  "Serendipity",
  "Quixotic",
  "Languid",
  "Ephemeral",
  "Susurrus",
  "Ebullient",
  "Petrichor",
  "Ineluctable",
  "Platitude",
  "Ennui",
  "Axiom",
  "Cacophony",
  "Halcyon",
  "Ineffable",
  "Juxtapose",
  "Lugubrious",
  "Nefarious",
  "Ostracize",
  "Pernicious",
  "Ruminate",
  "Solipsism",
  "Taciturn",
  "Wanderlust",
  "Zephyr",
  "Discombobulate",
  "Esoteric",
  "Incendiary",
  "Kudos",
  "Misanthrope",
  "Pensive",
  "Quagmire",
  "Ramify",
  "Stymie",
  "Unctuous",
  "Vex",
  "Wistful",
  "Banal",
  "Dichotomy",
  "Fecund",
  "Garrulous",
  "Hegemony",
  "Imbroglio",
  "Knell",
  "Mirth",
  "Obfuscate",
  "Parsimonious",
]

function createTries(word) {
  curr = tries
  for (let letter of word.toLowerCase()) {
    if (!curr[letter]) {
      curr[letter] = {};
    } 
    if (!curr[letter]["#"]) {
      curr[letter]["#"] = [] 
      curr[letter]["#"].push(word)
    } else {
      curr[letter]["#"].push(word)
    }

    curr = curr[letter];
  }
}

userNames.forEach((word) => createTries(word));

function findWord(word) {
  const results = new Set()

  function dfs(currTries, currWordPosition, fuzz_search, curr_sequential, max_sequential = 0) {
    if (currWordPosition === word.length || fuzz_search > 1) {
      console.log(currTries, currWordPosition, fuzz_search, curr_sequential, max_sequential)
      if (max_sequential >= 2) {
        currTries['#'].forEach((word) => results.add(word));
        console.log("hello")
      }
      return;
    }
    letter = word[currWordPosition].toLowerCase();
    Object.keys(currTries).forEach((key) => {
      if (key === '#') return;
      dfs(currTries[key], 
        currWordPosition + 1, 
        (key != letter) ?  fuzz_search + 1 : fuzz_search,
        (key == letter) ?  curr_sequential + 1 : 0,
        Math.max((key == letter) ?  curr_sequential + 1 : 0, max_sequential)
      );
    })
  }

  dfs(tries, 0, 0, 0)
  return results;
}
function populateSuggestions(inputValue) {
  const words = findWord(inputValue); 

  divSuggestion.innerHTML = ""; 
  for (let word of words) {
    let res = "";
    const lowerInput = inputValue.toLowerCase(); 
    for (let letter of word) {
      if (lowerInput.includes(letter.toLowerCase())) {
        res += `<span style="color: red;">${letter}</span>`;
      } else {
        res += letter;
      }
    }    
    divSuggestion.innerHTML += res + "<br>"; 
  }
}

let i = 0
inputEle.addEventListener('keypress', () => {
  if (previousId) {
    clearTimeout(previousId);
  }
  previousId = setTimeout(() => populateSuggestions(inputEle.value), 500); // 1, 2, 3
})