Vue.component('Menu',{
  template: `
  <section class="restomenu">
    <section v-if="this.obj.priceRange" class="top">
      <p class="b9h-lang-fr range">{{ fourchette.fr }}</p>
      <p class="b9h-lang-en range">{{ fourchette.en }}</p>
      <p class="b9h-lang-it range">{{ fourchette.it }}</p>
      <p class="price"> {{ this.obj.priceRange }}</p>
      <p class="b9h-lang-fr drinks">{{ horsboissons.fr }}</p>
      <p class="b9h-lang-en drinks">{{ horsboissons.en }}</p>
      <p class="b9h-lang-it drinks">{{ horsboissons.it }}</p>
    </section>

    <div class="dish" v-for="d in this.obj.dishes">
      <h3>{{ d.name }}</h3>
      <p class="b9h-lang-fr" > {{ l2s(ings2ls(d.ing,"fr"), "fr") }}</p>
      <p class="b9h-lang-en" > {{ l2s(ings2ls(d.ing,"en"), "en") }}</p>
      <p class="b9h-lang-it" > {{ l2s(ings2ls(d.ing,"it"), "it") }}</p>
    </div>
  </section>
  `,
  props : {
    obj : Object
  },
  data () {
    return {
      message : "hello from menu",
      et : {
        fr : " et ",
        en : " and ",
        it : " e ",
      },
      fourchette : {
        fr : "Fourchette de prix par personne:",
        en : "Price range per person:",
        it : "Fascia di prezzo per persona:",
      },
      horsboissons : {
        fr : "(hors boissons)",
        en : "(excluding drinks)",
        it : "(bevande escluse)",
      },
      indicatif : {
        fr : "menu fournis à titre indicatif",
      }
    }
  },
  methods : {
    capitalize(s){
      return s.charAt(0).toUpperCase() + s.slice(1)
    },
    l2s(l, lang) {
      let r = ""
      let llength = l.length - 1
      for (i in l){
        if (parseInt(i) === 0){
          r = this.capitalize(l[i])
        } else if (parseInt(i) < parseInt(llength)) {
          r = r + ", " + l[i]
        } else {
          r = r + this.et[lang] + l[i]
        }
      }
      return r
    },
    ings2ls(ings, lang){
      let l = []
      for (i in ings) {
        l.push(ings[i][lang])
      }
      return l
    }
  }
})

Vue.component('Time', {
  template : `
  <div class="timetable">
    <p v-for="(d, i) in this.obj.list">
      <span class="b9h-lang-fr">{{ days[i].fr }}</span>
      <span class="b9h-lang-en">{{ days[i].en }}</span>
      <span class="b9h-lang-it">{{ days[i].it }}</span>
      <span v-if="d != ''" class="hour">{{ d }}</span>
      <span v-if="d ==''" class="hour b9h-lang-fr">
        {{ closed.fr }}
      </span>
      <span v-if="d ==''" class="hour b9h-lang-en">
        {{ closed.en }}
      </span>
      <span v-if="d ==''" class="hour b9h-lang-it">
        {{ closed.it }}
      </span>
    </p>
  </div>
  `,
  props : {
    obj : Object
  },
  data () {
    return {
      message : "hello from time",
      closed : {
        fr : "Fermé",
        en : "Closed",
        it : "Chiuso",
      },
      days : {
        mon : {
          fr : "Lundi",
          en : "Monday",
          it : "Lunedì"
        },
        tue : {
          fr : "Mardi",
          en : "Tuesday",
          it : "Martedì"
        },
        wed : {
          fr : "Mercredi",
          en : "Wednesday",
          it : "Mercoledì"
        },
        thu : {
          fr : "Jeudi",
          en : "Thursday",
          it : "Giovedì"
        },
        fri : {
          fr : "Vendredi",
          en : "Friday",
          it : "Venerdì"
        },
        sat : {
          fr : "Samedi",
          en : "Saturday",
          it : "Sabato"
        },
        sun : {
          fr : "Dimanche",
          en : "Sunday",
          it : "Domenica"
        },
      }
    }
  },
  methods : {
    checkTime (d) {
      if (d != "" ){
        return d
      } else {
        return this.closed
      }

    }

  }
});


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

    <a>
      <span
      v-on:click="toggleActive()"
      class="listname"
      :class="{ active: this.list.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: this.list.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 v-on:click="setMap()">
        <img v-bind:src="this.list.img"></img>
      </aside>
      <aside class="txt">
        <h3 v-on:click="setMap()">{{ this.list.name }}</h3>
        <p class="b9h-lang-fr" v-on:click="setMap()">{{ this.list.txtFR }}</p>
        <p class="b9h-lang-en" v-on:click="setMap()">{{ this.list.txtEN }}</p>
        <p class="b9h-lang-it" v-on:click="setMap()">{{ this.list.txtIT }}</p>

        <section
          v-if="'card' in this.list"
          class="card"
          v-bind:id="this.cardid"
          v-bind:style="{ top: this.cardTop }">
        <span v-on:click="hideCard()"class="byl-icon-cross"></span>
        <div>

        <nav class="cardnav">
          <span class="marker"
            v-bind:style="{
              left : this.markerL,
              width : this.markerW
              }"
          ></span>
          <span
            v-for="i in this.list.card.tabs"
            v-on:click="setTab(getIndex(i))"
            v-bind:id="getMarkerId(i)"
            v-bind:class="getTabLogo(i)"
            ref="tabnavi"
            >
          </span>
        </nav>
        <section class="tabroll"
          v-bind:style="{
            width : this.tabrollw,
            transform : this.tabrollTransX
            }"
          >
          <section class="singletab"
            v-for="i in this.list.card.tabs">
            <Time v-if="i.tabtype === 'time'" v-bind:obj="i"></Time>
            <Menu v-if="i.tabtype === 'menu'" v-bind:obj="i"></Menu>
          </section>
        </section>
        </div>
        </section>

        <span
          v-if="'card' in this.list"
          v-on:click="showCard()"
          class="info">i</span>

      </aside>
    </section>
  </section>
  `,
  props : {
    list : Object
  },
  data () {
    return {
      isActive : false,
      displayCard : "block",
      cardTop : "110vh",
      tabrollxoff : 0,
      tabind : 0,
      markerL : 0,
      markerW : 0,
    }
  },
  computed: {
    xy: function () {
      if ('xy' in this.list) {
        return this.list.xy
      } else {
        return [0,0]
      }
    },
    dirxy: function () {
      if ('dirxy' in this.list) {
        return this.list.dirxy
      } else {
        return [0,0]
      }
    },
    dirzl: function () {
      if ('dirzl' in this.list) {
        return this.list.dirzl
      } else {
        return 1
      }
    },
    href: function () {
      return "#" + this.list.id;
    },
    cardid: function () {
      return "card" + this.list.id;
    },
    tabcount: function () {
      if ('card' in this.list){
        var arr = Object.entries(this.list.card.tabs);
        return arr.length
      } else {
        return 0;
      }
    },
    tabrollw: function () {
      return this.tabcount + "00vw";
    },
    tabrollTransX: function () {
      return "translateX(-" + this.tabrollxoff + "00vw)";
    },
  },
  methods : {
    getMarkerId(i) {
      return this.cardid + this.getIndex(i).toString()
    },
    getIndex(obj) {
      var arr = Object.entries(this.list.card.tabs);
      let ind = arr.findIndex(e => e[0] === obj.tabtype);
      return ind
    },
    setTab(ind) {
      this.tabrollxoff = ind;
      this.tabind = ind
      t = document.getElementById(this.cardid + ind);
      this.markerL = t.offsetLeft + "px"
      this.markerW = t.offsetWidth + "px"
    },
    getTabLogo(obj) {
      switch(obj.tabtype) {
        case "menu":
          return "byl-icon-restaurant"
          // code block
          break;
        case "time":
          return "byl-icon-clock"
          // code block
          break;
        default:
          // code block
      }
    },
    showCard() {
      this.displayCard = "block";
      this.setTab(0)
      this.cardTop = "0vh"
      this.setTab(0)
      this.setTab(0)
      this.setMap()
      this.setTab(0)
    },
    hideCard() {
      this.cardTop = "110vh"
    },
    donothing () {

    },
    toggleActive () {
      this.list.isActive = !this.list.isActive
      document.getElementById(this.list.id).scrollIntoView();
    },
    setMap () {
      map.setView(this.dirxy, this.dirzl)
      this.list.marker.openPopup()
    }
  },
})


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 : jdb.data,
  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';
      }
    },
    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(){
    this.setlang('fr');
  },
  mounted: function() {
    this.setlang('fr');
    this.setlang('fr');
    this.setlang('fr');
    this.setlang('fr');
    this.setlang('fr');
  },
  updated: function() {
    this.setlang('fr');
    this.setlang('fr');
    this.setlang('fr');
    this.setlang('fr');
  }

})