import React, { useState } from 'react';
import { 
  IonItem,
  IonImg,
  IonList, 
  IonSearchbar,
  IonCard, 
  IonCardHeader,
  IonCardTitle,
  IonCardContent,
  IonCardSubtitle,
  IonIcon,
} from '@ionic/react';
import biographies from '../data/Biograph.json'
import { clipboardOutline } from 'ionicons/icons';

function SearchBar() {

  let [results, setResults] = useState([...biographies]);

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

    setResults(biographies.filter(bio => {
      return bio.title.toLowerCase().indexOf(query) > -1;
    })
    )
  }

  return (
    <>
      <IonSearchbar debounce={500} onIonChange={(ev) => filterSearch(ev)}></IonSearchbar>

      <IonList inset={true}>
        { results.map(result => (
          <>
          <IonCard>
            <IonItem routerLink={`/Biography/${result.id}`}>
              <IonImg style={{ height: 300, width: 600 }} src={result.photo} alt='Logo'></IonImg>
              <IonCardHeader>
                <IonCardTitle>{result.title}</IonCardTitle>
                <IonCardSubtitle>{result.tags}</IonCardSubtitle>
              </IonCardHeader><IonCardContent>
                {result.content}
              </IonCardContent>
            </IonItem>
            <IonItem routerLink={`/Question/${result.id}`} detail={true}>
              <IonIcon icon={clipboardOutline} />Tomar quiz
            </IonItem>
          </IonCard>
        </>
        ))}
      </IonList>
    </>
  );
}
export default SearchBar;