const debounce = (func, timeout = 300) => {
  let timer;
  return (...args) => {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      func(...args);
    }, timeout);
  };
};

function SearchDebounce() {
  const [results, setResults] = React.useState([]);

  const handleChange = async (val) => {
    if (val === "") {
      setResults([]);
      return;
    }
    // search meal db
    const res = await fetch(
      `https://www.themealdb.com/api/json/v1/1/search.php?s=${val}`
    );
    const data = await res.json();
    if (data.meals !== null) {
      const mealObjs = data.meals;
      const meals = mealObjs.map((meal) => meal.strMeal);
      setResults(meals);
    } else setResults([]);
  };

  return (
    <SearchWrapper>
      <SearchBar
        onChange={debounce((e) => handleChange(e.target.value))}
        placeholder="Search for a recipe..."
      />
      {results.length !== 0 && (
        <ResultsCont>
          {results.map((meal) => (
            <Result
              key={meal}
              href={`https://www.google.com/search?q=${meal}`}
              target="_blank"
              rel="noopener noreferrer"
            >
              {meal}
            </Result>
          ))}
        </ResultsCont>
      )}
    </SearchWrapper>
  );
}