import React, { useState } from 'react';
import { IonItem, IonList, IonSearchbar } from '@ionic/react';

function SearchBar() {
  const data = ['Breve Historia del baile en Puerto Rico', 'Cápsula#2', 'Cápsula#3'];
  let [results, setResults] = useState([...data]);

  const handleChange = (ev: Event) => {
    let query = "";
    const target = ev.target as HTMLIonSearchbarElement;
    if (target) query = target.value!.toLowerCase();

    setResults(data.filter(d => d.toLowerCase().indexOf(query) > -1));
  }

  return (
    <>
      <IonSearchbar debounce={1000} onIonChange={(ev) => handleChange(ev)}></IonSearchbar>

      <IonList inset={true}>
        { results.map(result => (
          <IonItem>{ result }</IonItem>
        ))}
      </IonList>
    </>
  );
}
export default SearchBar;