<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="searchQuery"
          :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>
    <h2>Tags de data.elements[0]</h2>
    <section v-if="data && data.elements" class="edit">
      elements: {{ data.elements.length }}
      <b-field label="Nom">
        <b-input
          v-model="data.elements[0].tags.name"
          placeholder="le nom de votre commerce"
          icon="pencil"
        ></b-input>
      </b-field>
      <b-field label="Site web">
        <b-input
          v-model="data.elements[0].tags.website"
          placeholder="www.monsite.com"
          icon="planet"
        ></b-input>
      </b-field>
      <b-field label="email officiel">
        <b-input
          v-model="data.elements[0].tags.mail"
          placeholder="contact@monsite.com"
          icon="enveloppe"
        ></b-input>
      </b-field>
      <b-field label="Tel">
        <b-input
          v-model="data.elements[0].tags.phone"
          placeholder="012345"
          icon="planet"
          type="tel"
        ></b-input>
      </b-field>
      <b-field label="Description de votre activité">
        <b-input
          v-model="data.elements[0].tags.description"
          placeholder="description de votre activité"
          icon="planet"
          type="tel"
        ></b-input>
      </b-field>
      <b-field>
        <b-switch v-model="data.elements[0].tags.takeaway">
          Vente à emporter
        </b-switch>
        <b-switch v-model="data.elements[0].tags['parking:velo']">
          Parking vélo
        </b-switch>
        <b-switch v-model="data.elements[0].tags['webaccess']">
          Accès Internet
        </b-switch>
        <b-switch v-model="data.elements[0].tags['elecborne']">
          borne de recharge électrique sur parking
        </b-switch>
        <b-switch v-model="data.elements[0].tags['access:public']">
          Accès autorisé au public
        </b-switch>
      </b-field>

      <h2 class="title is-2">Horaires d'ouverture</h2>
      <div class="padded">
        {{ data.elements[0].tags.opening_hours }}
      </div>

      <button class="btn button has-background-success">Enregistrer</button>
    </section>

    <section>
      <section class="comparaison">
        <h2>Comparaison des tags</h2>
        <table>
          <thead>
            <tr>
              <td>API OSM</td>
              <td>API addok</td>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <!--                <div v-for="(value, name) in data[0].properties.tags" :key="name">-->
                <!--                  <div class="columns">-->
                <!--                    <div class="column">-->
                <!--                      <strong> {{ name }} </strong>-->
                <!--                    </div>-->
                <!--                    <div class="column">-->
                <!--                      {{ value }}-->
                <!--                    </div>-->
                <!--                  </div>-->
                <!--                </div>-->
              </td>
              <td v-if="osm_data && osm_data.elements">
                <div
                  v-for="(value, name) in osm_data.elements[0].tags"
                  :key="name"
                >
                  <div class="columns">
                    <div class="column">
                      <strong> {{ name }}</strong>
                    </div>
                    <div class="column">{{ value }}</div>
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </section>
    </section>
    <pre v-if="select">
      select.properties:
      {{ select }}
    </pre>
    <pre v-if="data">
      data:
      {{ data }}
    </pre>
    <pre v-if="osm_data">
      osm_data:
      {{ osm_data }}
    </pre>
  </main>
</template>

<script>
import debounce from 'lodash/debounce'
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: {},
      searchQuery: 'librairie interlignes',
      isFetching: false,
    }
  },
  mounted() {
    this.getAsyncData(this.searchQuery)
  },
  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.isFetching = 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])

          data.features.forEach((item) => this.data.push(item))
        })
        .catch((error) => {
          this.data = []
          throw error
        })
        .finally(() => {
          this.isFetching = 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.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.osm_data = data
            this.mixTags()
          })
          .catch((error) => {
            this.osm_data = []
            throw error
          })
          .finally(() => {
            this.isFetching = false
          })
      } else {
        console.log('l url donnée n a pas de node ', url)
      }
    },

    mixTags() {
      if (this.osm_data && this.osm_data.elements[0]) {
        for (const [key, value] of Object.entries(
          this.osm_data.elements[0].tags
        )) {
          if (!this.all_tags[key]) {
            this.createMissingKeyForMix(key)
          }
          this.all_tags[key].osm_data = value
        }
      }
      if (this.select && this.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: '',
      }
    },
  },
}
</script>
<style>
.clickable {
  cursor: pointer;
}

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