Vue.component('Accordeon', {
  template : `
  <section v-bind:id="this.list.id">
  <nav v-if="this.list.type === 'list'">

    <a v-bind:href="this.href">
      <span
      v-on:click="toggleActive()"
      class="listname"
      :class="{ active: isActive }">

        <h3 class="b9h-lang-fr">{{ this.list.nameFR }}</h3>
        <h3 class="b9h-lang-en">{{ this.list.nameEN }}</h3>
        <h3 class="b9h-lang-it">{{ this.list.nameIT }}</h3>
        <span class="byl-icon-chevron-down listicon">

      </span>
    </a>
    <section class="listchild" :class="{ active: isActive }">
      <Accordeon v-for="i in this.list.sub" v-bind:list="i"></Accordeon>
    </section>
  </nav>
    <section v-if="this.list.type === 'item'" class="lastlistitem">
      <aside>
        <img v-bind:src="this.list.img"></img>
      </aside>
      <aside class="txt">
        <h3>{{ this.list.name }}</h3>
        <p class="b9h-lang-fr">{{ this.list.txtFR }}</p>
        <p class="b9h-lang-en">{{ this.list.txtEN }}</p>
        <p class="b9h-lang-it">{{ this.list.txtIT }}</p>

        <span class="info">i</span>

      </aside>
    </section>
  </section>
  `,
  props : {
    list : Object
  },
  data () {
    return {
      isActive : false
    }
  },
  computed: {
    href: function () {
      return "#" + this.list.id;
    }
  },
  methods : {
    donothing () {

    },
    toggleActive () {
      this.isActive = !this.isActive
      document.getElementById(this.list.id).scrollIntoView(
        {
          behavior: "smooth",
          block: "end",
          inline: "nearest"}
      );
    }
  }
})


const jsonurl = "https://ed.brz9.dev/proj/map/asset/json/db.json"

/*
let jdnb

fetch(jsonurl)
  .then(res => res.json())
  .then(data => jdnb = data)
*/

let vm = new Vue({
  el: '#root',
  data: {
    currentLang: 'fr',
    fdata: {},
    dburl : "https://ed.brz9.dev/proj/map/asset/json/db.json",
    db : {},
    db2 : {
      restaurants : {
        id : "resto",
        type : "list",
        nameFR : "Restaurant",
        nameEN : "Restaurant",
        nameIT : "Ristoranti",
        sub : {
          italiens : {
            id: "restoital",
            type : "list",
            nameFR : "Italien",
            nameEN : "Italian",
            nameIT : "Italiano",
            sub : {
              SanTelmo : {
                id: "santelmo",
                type : "item",
                name: "San Telmo",
                img: "https://ed.brz9.dev/proj/map/asset/img/santelmo.jpg",
                txtFR: "Français Adipisicing live-edge fam velit. Messenger bag poke laboris aesthetic viral do semiotics authentic est selfies.",
                txtEN: "English Adipisicing live-edge fam velit. Messenger bag poke laboris aesthetic viral do semiotics authentic est selfies.",
                txtIT: "Italiano Adipisicing live-edge fam velit. Messenger bag poke laboris aesthetic viral do semiotics authentic est selfies.",
                card : {
                  tabs : {
                    menu : {
                      priceRange : "18-32€",
                      dishes : {
                        divola : {
                          name : "Pizza Divola",
                        },
                        regina : {
                          name : "Pizza Regina",
                        }
                      }
                    },
                    time : {
                      monAM : "11h30-14h00",
                      monPM : "18h30-22h00",

                    }
                  }
                }
              },
              Salsamenteria : {
                id: "salsamenteria",
                type : "item",
                name: "Salsamenteria di Parma",
                img: "https://ed.brz9.dev/proj/map/asset/img/salsamentiera.jpg",
                txtFR: "Français Adipisicing live-edge fam velit. Messenger bag poke laboris aesthetic viral do semiotics authentic est selfies.",
                txtEN: "English Adipisicing live-edge fam velit. Messenger bag poke laboris aesthetic viral do semiotics authentic est selfies.",
                txtIT: "Italiano Adipisicing live-edge fam velit. Messenger bag poke laboris aesthetic viral do semiotics authentic est selfies.",
              },
            },
          },
          vege : {
            id : "restovege",
            type : "list",
            nameFR : "Végétarien",
            nameEN : "Vegan",
            nameIT : "Vegetariano",
            sub : {
              SanTelmo : {
                id: "santelmo",
                type : "item",
                name: "San Telmo",
              },
              Salsamenteria : {
                id: "salsamenteria",
                type : "item",
                name: "Salsamenteria di Parma",
              },
            }
          }
        }
      }
    }
  },
  methods: {
    hidelang: function(lang) {
      langClass = "b9h-lang-" + lang;
      langElms = document.getElementsByClassName(langClass);
      for (i = 0; i < langElms.length; i++) {
        langElms[i].style.display = 'none';
      }
    },
    hidelangs: function() {
      this.hidelang('fr');
      this.hidelang('en');
      this.hidelang('it');
    },
    showlang: function(lang) {
      this.hidelangs();
      langClass = "b9h-lang-" + lang;
      langElms = document.getElementsByClassName(langClass);
      for (i = 0; i < langElms.length; i++) {
        langElms[i].style.display = 'revert';
      }
    },
    async getJDB(){
      const res = await fetch(this.dburl);
      const data = await res.json();
      this.db = data;
    },
    setlang: function (lang) {
      target = document.querySelector("#"+"tab-"+lang);
      marker = document.querySelector("#lang-marker");
      marker.style.left = target.offsetLeft + "px";
      marker.style.width = target.offsetWidth + "px";
      this.showlang(lang);
    },
  },
  created: function(){
    console.log("about to call getJDB")
//    this.getJDB();
    fetch("http://localhost:3000/db")
      .then(res => res.json())
      .then(data => this.db = data)
      .catch(err => console.log(err.message))
    console.log("after getJDB call")
    this.setlang('fr');
  },
  mounted: function() {
    console.log("mounting");
    this.setlang('fr');
    console.log("mounted");
    this.setlang('fr');
  },
  updated: function() {
    this.setlang('fr');
  }

})