<script lang="ts" setup>

  import {Ref} from "#imports";

  const queryString: Ref<String> = ref("la tour eiffel")
  let selectedPoi: any = ref({})

  let osmNodeData = {};

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

  function setPoi(newPoi){
    selectedPoi = newPoi
  }
  function submitForm(){
    console.log('envoi du form')
  }

  async function getOSMNodeData(url:string) {
    if (!url.length) {
      this.fetchedData.osm_data = []
    }
    console.log('url', url)
    if (url.includes('node')) {
      const boom = url.split('/')
      const objectNumber = boom[boom.length - 1]
       let response = await useAsyncData('/api/hello',
        () => $fetch(`https://api.openstreetmap.org/api/0.6/node/${objectNumber}.json`))
      osmNodeData = response.data._rawValue.elements[0]
      console.log('osmNodeData', osmNodeData )


    } else {
      console.log('l url donnée n a pas de node ', url)
    }
  }

</script>

<template>
  <div>
    <div class="card mt-10">
      <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">
      </div>
      <div class="states">
        <div v-if="pending"> Loading ...</div>
        <span class="mx-2" v-if="data">
          {{data?.features?.length}} résultats
        </span>
      </div>
      <div class="my-2" >


        <div v-for="poiFeatures in data?.features" :key="poiFeatures.id" >

          <button
            class="bg-slate-600 hover:bg-slate-700
            text-slate-100 rounded-md
             font-medium py-1 mb-1 ring-1
             ring-inset ring-slate-900/5
             text-left p-2 px-4 w-1/2"
            :class="{'bg-slate-900': poiFeatures.id === selectedPoi?.id}"
            @click="selectedPoi = poiFeatures">
                  <span class="text-md">

                  ✏️ {{poiFeatures.properties.name}}
                  </span>
            <br>
                        <span class="text-sm">
                            {{poiFeatures.properties.poi}}
                            {{poiFeatures.properties.city}}
                            {{poiFeatures.properties.citycode}}
                            {{poiFeatures.properties.context}}
                              </span>
          </button>

        </div>
      </div>
    </div>

    <section>
      <div class="selectedPoi bg-slate-400 p-4" v-if="selectedPoi.properties">
        <!--        <PoiForm :currentPoi="selectedPoi"/>-->
                <h1 class="text-5xl">

        Point d'intérêt sélectionné
                </h1>

                <form @submit="submitForm"  v-if="selectedPoi.properties?.name">
                  <label for="prop_name" class="font-medium">Nom</label>
                  <input
                    class="p-4 rounded w-full h-10 mb-10"
                    id="prop_name"
                    type="text" v-model="selectedPoi.properties.name">


                  <input class="bg-slate-800  text-white rounded my-4 p-4 w-full" type="submit" value="modifier"/>
                </form>
<div>

        <a  class="bg-slate-800 text-white rounded mt-10 p-4 w-auto"  :href="selectedPoi.properties?.id">
          🗺️ voir ce point sur OpenStreetMap</a>
</div>
        <div  class="w-full">

        <p>
          Lat , Lon:
          {{selectedPoi?.geometry?.coordinates[0]}},
          {{selectedPoi?.geometry?.coordinates[1]}}
        </p>

        </div>
        <!--        <div class="debug">-->

        <!--          sélectionné:-->
<!--                  <pre>-->
<!--                  {{selectedPoi}}-->
<!--                  </pre>-->
        <!--        </div>-->
      </div>

<!--      debug:-->

<!--      <pre>-->
<!--                  {{data}}-->
<!--                  </pre>-->

    </section>

    <section>
      <button class="bg-slate-800 text-white rounded mt-10 p-4 w-auto"
              @click="getOSMNodeData('https://osm.org/node/330414112')">

      Get OSM data example
      </button>

      <div class="node-data" v-if="osmNodeData">
        <pre>
          {{osmNodeData}}
        </pre>
      </div>
    </section>

  </div>
</template>

<style scoped></style>
