<template>
  <main>
    <section>
      Résultats possibles: {{ data.length }}
      <div v-if="select && select.properties" class="selected">
        <p class="content">
          <b>Selected:</b>
          <strong>
            {{ select.properties.name }}
          </strong>
          {{ select.properties.citycode }}
          {{ select.properties.context }}
          <br />
          <a :href="select.properties.id">{{ select.properties.id }}</a>
        </p>
      </div>

      <b-field label="Trouver mon Commerce par nom ou par SIREN">
        <b-autocomplete
          v-model="searchInput"
          :data="data"
          placeholder="ex: Chambre du commerce d'Evry"
          field="title"
          :loading="isFetching"
          icon="magnify"
          autofocus="autofocus"
          @typing="getAsyncData"
          @select="
            (option) => {
              selectChoice(option)
            }
          "
        >
          <template slot-scope="props">
            <div class="media">
              <div class="media-left"></div>
              <div class="media-content">
                <h2>
                  {{ props.option.properties.name }}
                </h2>
                <div class="columns">
                  <div class="column">
                    <strong v-if="props.option.properties.poi">
                      {{ props.option.properties.poi }}
                    </strong>
                  </div>
                  <div class="column">
                    {{ props.option.properties.context }}
                  </div>
                  <div class="column">
                    {{ props.option.properties.type }}
                  </div>
                </div>
              </div>
            </div>
          </template>
        </b-autocomplete>
      </b-field>

      <div v-if="data.length">
        <!--        <ul>-->
        <!--          <li-->
        <!--            v-for="item in data"-->
        <!--            :key="item.properties.id"-->
        <!--            class="clickable"-->
        <!--            @click="-->
        <!--              (event) => {-->
        <!--                select = item-->
        <!--                selectChoice(item)-->
        <!--              }-->
        <!--            "-->
        <!--          >-->
        <!--            <div class="columns">-->
        <!--              <div class="column">-->
        <!--                <strong>-->
        <!--                  {{ item.properties.name }}-->
        <!--                </strong>-->
        <!--              </div>-->
        <!--              <div class="column">-->
        <!--                {{ item.properties.context }}-->
        <!--              </div>-->
        <!--              <div class="column">-->
        <!--                {{ item.properties.type }}-->
        <!--              </div>-->
        <!--            </div>-->
        <!--          </li>-->
        <!--        </ul>-->
      </div>
    </section>
    <section class="map">
      <br />
      ( ici une carte )
      <img src="~assets/carte_demo.png" alt="logo osm" />
    </section>
    <h2>Sélection:</h2>
    <fieldset class="has-background-info">
      <section v-if="select && select.properties" class="result">
        <div class="card-content">
          <div class="media">
            <div class="media-left">
              <figure class="image is-48x48">
                <img
                  src="https://bulma.io/images/placeholders/96x96.png"
                  alt="Placeholder image"
                />
              </figure>
            </div>
            <div class="media-content">
              <p class="title is-4">
                {{ select.properties.label }}
                {{ select.properties.denominationunitelegale }}
                | {{ select.properties.enseigne1etablissement }}
              </p>
              <p class="subtitle is-6">
                {{ select.properties.context }}
              </p>
              <p class="title is-6">
                {{ select.properties.city }} ,
                {{ select.properties.longitude }} ,
                {{ select.properties.latitude }}
              </p>
            </div>
          </div>

          <div class="content">
            NAF:
            {{ select.properties.nomenclatureactiviteprincipaleunitelegale }}
            siret : {{ select.properties.siret }}
            <br />

            activité principale
            {{ select.properties.activiteprincipaleetablissement }}, source
            {{ select.properties.source }},
            <time datetime="2016-1-1">
              enregistré le
              {{ select.properties.anneeeffectifsetablissement }}, entreprise
              créé le {{ select.properties.datedebut }}, dernirèe mise à jour
              {{ select.properties.updated_at }}
            </time>
          </div>
        </div>
      </section>
    </fieldset>
    <section>
      <h2 class="title is-2">Debug info</h2>
      <pre v-if="select">
      select.properties:
      {{ select }}
    </pre
      >
      <pre v-if="fetchedData.osm_data">
      fetchedData OSM:
      {{ fetchedData.osm_data }}
    </pre
      >
    </section>
  </main>
</template>

<script>
import debounce from 'lodash/debounce'
import { mapMutations } from 'vuex'
import * as resultsAddok from '../mocks/addok'
import * as resultsEntreprise from '../mocks/entreprise'
import * as nodeInfo from '../mocks/osm_larome'

export default {
  data() {
    return {
      data: [],
      osm_data: [],
      all_tags: [],
      xml: nodeInfo.default.elements[0],
      mockEntreprise: resultsEntreprise.default,
      mockAddok: resultsAddok.default,
      select: {},
    }
  },
  computed: {
    isFetching() {
      return this.$store.state.isFetching
    },
    searchInput() {
      return this.$store.state.searchInput
    },
    fetchedData() {
      return this.$store.state.fetchedData
    },
  },
  mounted() {
    if (!this.$store.state.fetchedData.addok_data) {
      console.log(
        'choppons de la data, y a rien dans le store ',
        this.$store.state.fetchedData
      )
      this.getAsyncData(this.searchInput)
    } else {
      console.log('addok_data déjà trouvée')
    }
  },
  methods: {
    // You have to install and import debounce to use it,
    // it's not mandatory though.
    getAsyncData: debounce(function (name) {
      if (!name.length) {
        this.data = []
      }
      this.setFetching(true)

      this.$axios
        .get(`https://demo.addok.xyz/search?&type=poi&q=${name}`)
        .then(({ data }) => {
          console.log('data', data)
          this.data = []
          this.selectChoice(data.features[0])
          this.setFetchedDataAddok(data)

          data.features.forEach((item) => this.data.push(item))
        })
        .catch((error) => {
          this.data = []
          throw error
        })
        .finally(() => {
          this.setFetching(false)
        })
    }, 500),
    selectChoice(option) {
      console.log('option', option)
      this.select = option
      if (option && option.properties.id) {
        this.getOSMNodeData(option.properties.id)
      }
    },
    getOSMNodeData(url) {
      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]
        this.isFetching = true
        this.$axios
          .get(
            `https://api.openstreetmap.org/api/0.6/node/${objectNumber}.json`
          )
          .then(({ data }) => {
            console.log('OSM data', data)
            this.setFetchedDataOsm(data)
            this.mixTags()
          })
          .catch((error) => {
            throw error
          })
          .finally(() => {
            this.setFetching(false)
          })
      } else {
        console.log('l url donnée n a pas de node ', url)
      }
    },

    mixTags() {
      if (this.fetchedData.osm_data && this.fetchedData.osm_data.elements[0]) {
        for (const [key, value] of Object.entries(
          this.fetchedData.osm_data.elements[0].tags
        )) {
          if (!this.all_tags[key]) {
            this.createMissingKeyForMix(key)
          }
          this.all_tags[key].osm_data = value
        }
      }
      if (
        this.$store.state.selectedResult &&
        this.fetchedData.osm_data.elements[0]
      ) {
        for (const [key, value] of Object.entries(this.select)) {
          if (!this.all_tags[key]) {
            this.createMissingKeyForMix(key)
          }
          this.all_tags[key].osm_data = value
        }
      }
    },
    createMissingKeyForMix(key) {
      this.all_tags[key] = {
        osm_data: '',
        addok_data: '',
      }
    },
    ...mapMutations({
      setFetching: 'index/setFetching',
      setTag: 'index/setTag',
      setSelectedResult: 'index/setSelectedResult',
      setFetchedDataOsm: 'index/setFetchedDataOsm',
      setFetchedDataAddok: 'index/setFetchedDataAddok',
    }),
  },
}
</script>
<style>
.clickable {
  cursor: pointer;
}

.clickable:hover {
  background: #d8e9ba;
}
</style>
