<template>
  <ion-searchbar :debounce="1000" @ionInput="handleInput($event)"></ion-searchbar>
  <ion-list>
    <template v-for="result in results">
      <SearchItem :obj="result" />
    </template>
  </ion-list>

</template>
<script setup>
import { IonItem, IonList, IonSearchbar,IonLabel } from '@ionic/vue';
import { ref } from 'vue';
import { searchMat } from '@/composable/settings';
import SearchItem from '@/components/SearchItem.vue';

 const data = [
        'Amsterdam',
        'Buenos Aires',
        'Cairo',
        'Geneva',
        'Hong Kong',
        'Istanbul',
        'London',
        'Madrid',
        'New York',
        'Panama City',
];
const results = ref();
const handleInput = async (event) => {
  console.log("handleInput")
  console.log(event)
  const query = event.target.value.toLowerCase();
  console.log("query = ", query)
  if(query == "") {
    results.value = []
  }else {
    //results.value = data.filter((d) => d.toLowerCase().indexOf(query) > -1);
    const r = await searchMat(query)
    results.value = r.results
  }
}
</script>
