<script setup lang="ts">

  const queryString = ref("la tour eiffel")
  let selectedPoi = {}


  const {data, pending, refresh} = await useAsyncData(() => {
      if (queryString.value.length > 3) {
        return $fetch(`https://demo.addok.xyz/search?&type=poi&q=${queryString.value}`)
      }
    },
    {watch: [queryString]})

  function selectPoi(poi) {
    selectedPoi = poi;
  }

  computed : {
    poi_list : data.features
  }

</script>

<template>
  <div>
    <div class="card mt-10">


      <div class="selectedPoi" v-if="selectedPoi">
        sélectionné: {{selectedPoi.label}}
        <input type="text" v-model="selectedPoi.name">
      </div>
      <div class="search-form">

        <label for="search_poi" class="text-4xl font-bold">
          <!--          Effectuer une recherche-->
          🔍
        </label>
        <input id="search_poi"
               type="search"
               class="h-10 px-6 rounded-md border-2"
               placeholder="tour eiffel"
               autofocus="autofocus"
               v-model="queryString">
        <button :disabled="pending" class="h-10 px-6 rounded-md bg-black text-white"
                type="submit"
                @click="useAsyncData()">
          Rechercher
        </button>
      </div>
      <div class="states">
        <div v-if="pending"> Loading ...</div>
        <span class="mx-2" v-if="data?.features.length"> {{data.features.length}} résultats </span>
      </div>
      <div class="my-2">


        <div v-for="elem in data.features" :key="elem.properties.id">

          <button
            class="bg-slate-900 hover:bg-slate-700 text-slate-100 rounded-md font-medium leading-6 py-1 mb-1 ring-1 ring-inset ring-slate-900/5 mx-auto p-2 px-4 w-1/2"
            @click="selectPoi(elem)">
            <span class="text-md">

            {{elem.properties.name}}
            </span>
            <br>
            <span class="text-sm">
          {{elem.properties.poi}}
          {{elem.properties.city}}
          {{elem.properties.citycode}}
          {{elem.properties.context}}
            </span>
          </button>
          <!--          {{elem.properties.label}}-->

        </div>
        <!--        <pre class="text-left"><code>{{ data }}</code></pre>-->
      </div>
    </div>

  </div>
</template>

<style scoped></style>
