Vue.component('Prototab',{
  template : `
    <div class="tabprixcontent">


    </div>
  `,
  props : {
    obj : Object
  },
  data () {
    return {
      siteoff : {
        fr : "Site officiel",
        en : "Official website",
        it : "Sito ufficiale",
      },
    }
  },
  methods : {
    capitalize(s){
      return s.charAt(0).toUpperCase() + s.slice(1)
    },
  }
})

Vue.component('Prix',{
  template : `
    <div class="tabprixcontent">
      <section class="prixtexttop" v-if="this.obj.hasOwnProperty('txt')">
        <p class="b9h-lang-fr">{{ this.obj.txt.fr }}</p>
        <p class="b9h-lang-en">{{ this.obj.txt.en }}</p>
        <p class="b9h-lang-it">{{ this.obj.txt.it }}</p>
      </section>

      <section class="pricelist">
      <p v-for="l in this.obj.list">
        <span class="pricename">
          <span class="b9h-lang-fr">{{ l.nameFR }}</span>
          <span class="b9h-lang-en">{{ l.nameEN }}</span>
          <span class="b9h-lang-it">{{ l.nameIT }}</span>
        </span>
        <span class="price">
          <span class="b9h-lang-fr">{{ checkPrice(l.price,free.fr) }}</span>
          <span class="b9h-lang-en">{{ checkPrice(l.price,free.en) }}</span>
          <span class="b9h-lang-it">{{ checkPrice(l.price,free.it) }}</span>
        </span>
      </p>
      </section>
      <section class="prixindicatif">
        <p class="b9h-lang-fr">{{ indicatif.fr }}</p>
        <p class="b9h-lang-en">{{ indicatif.en }}</p>
        <p class="b9h-lang-it">{{ indicatif.it }}</p>
      </section>

    </div>
  `,
  props : {
    obj : Object
  },
  data () {
    return {
      indicatif : {
        fr : "Prix fournis à titre indicatif.",
        en : "Prices provided as an indication.",
        it : "Prezzi puramente indicativi.",
      },
      free : {
        fr : "Gratuit",
        en : "Free",
        it : "Gratuito",
      }
    }
  },
  methods : {
    checkPrice(p,f){
      if (p == "") {
        return f
      } else {
        return p
      }
    },

  }
})

Vue.component('Info',{
  template : `
    <div class="tabinfocontent">

      <section class="infoline" v-if="this.obj.hasOwnProperty('site')">
        <a v-bind:href="this.obj.site" target="_blank">
          <span class="byl-icon-link infotags"></span>
          <span class="b9h-lang-fr">{{ siteoff.fr }}</span>
          <span class="b9h-lang-en">{{ siteoff.en }}</span>
          <span class="b9h-lang-it">{{ siteoff.it }}</span>
        </a>
      </section>

      <section class="infoline" v-if="this.obj.hasOwnProperty('tel')">
        <a v-bind:href="this.telhref">
          <span class="byl-icon-call infotags"></span>
          <span>{{ this.obj.tel }}</span>
        </a>
      </section>

      <section class="infoline" v-if="this.obj.hasOwnProperty('email')">
        <a v-bind:href="this.mailhref">
          <span class="byl-icon-mail_outline infotags"></span>
          <span>{{ this.obj.email }}</span>
        </a>
      </section>

      <section class="infoline" v-if="this.obj.hasOwnProperty('address')">
        <span class="byl-icon-location_on infotags"></span>
        <span>{{ this.obj.address }}</span>
      </section>

      <section class="infoline" v-if="this.obj.hasOwnProperty('handi')">
        <span class="byl-icon-accessible infotags"></span>
        <span class="b9h-lang-fr">{{ handi.fr }}</span>
        <span class="b9h-lang-en">{{ handi.en }}</span>
        <span class="b9h-lang-it">{{ handi.it }}</span>
      </section>

      <section class="infoline" v-if="this.obj.hasOwnProperty('hautmax')">
        <span class="byl-icon-publish infotags"></span>
        <span class="b9h-lang-fr">
          {{ hautmax.fr }} {{ this.obj.hautmax}}
        </span>
        <span class="b9h-lang-en">
          {{ hautmax.en }} {{ this.obj.hautmax}}
        </span>
        <span class="b9h-lang-it">
          {{ hautmax.it }} {{ this.obj.hautmax}}
        </span>
      </section>





    </div>
  `,
  props : {
    obj : Object
  },
  computed : {
    telhref: function () {
      if (this.obj.hasOwnProperty('tel')) {
        return "tel:" + this.obj.tel
      }
    },
    mailhref: function () {
      if (this.obj.hasOwnProperty('email')) {
        return "mailto:" + this.obj.email
      }
    },
  },
  data () {
    return {
      siteoff : {
        fr : "Site officiel",
        en : "Official website",
        it : "Sito ufficiale",
      },
      handi : {
        fr : "Accessible en fauteuil roulant",
        en : "Wheelchair accessible",
        it : "Accessibile con sedia a rotelle",
      },
      hautmax: {
        fr : "Hauteur maximum: ",
        en : "Maximum height: ",
        it : "Altezza massima: ",
      }
    }
  },
  methods : {
    capitalize(s){
      return s.charAt(0).toUpperCase() + s.slice(1)
    },
  }
  //byl-icon-wifi
  //byl-icon-location_on
  //byl-icon-accessible
})

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>

    <section v-for="s in this.obj.sections">
      <h2 class="b9h-lang-fr"> {{ s.nameFR }}</h2>
      <h2 class="b9h-lang-en"> {{ s.nameEN }}</h2>
      <h2 class="b9h-lang-it"> {{ s.nameIT }}</h2>

      <div class="dish" v-for="d in s.list">
        <h3 v-if="d.name !== 'blank'">
          {{ d.name }}
          <span
            v-if="d.hasOwnProperty('vege')"
            class="byl-icon-leaf vege">
          </span>
        </h3>
        <ul v-if="d.name !== 'blank'">
          <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>
        </ul>
        <ul v-else>
          <h3 class="b9h-lang-fr">
            {{ l2s(ings2ls(d.ing,"fr"), "fr") }}
            <span
              v-if="d.hasOwnProperty('vege')"
              class="byl-icon-leaf vege">
            </span>
          </h3>
          <h3 class="b9h-lang-en">
            {{ l2s(ings2ls(d.ing,"en"), "en") }}
            <span
              v-if="d.hasOwnProperty('vege')"
              class="byl-icon-leaf vege">
            </span>
          </h3>
          <h3 class="b9h-lang-it">
            {{ l2s(ings2ls(d.ing,"it"), "it") }}
            <span
              v-if="d.hasOwnProperty('vege')"
              class="byl-icon-leaf vege">
            </span>
          </h3>
        </ul>
      </div>
    </section>

    <section class="menuindicatif">
      <p class="b9h-lang-fr"> {{ indicatif.fr }}</p>
      <p class="b9h-lang-en"> {{ indicatif.en }}</p>
      <p class="b9h-lang-it"> {{ indicatif.it }}</p>
    </section>
    </br>
    </br>
    </br>
  </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, soumis aux disponibilités",
        en : "Menu provided as an indication, subject to availability",
        it : "Menu fornito a titolo informativo, soggetto a disponibilità",
      }
    }
  },
  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-plus listicon"></span>

      </span>
    </a>
    <section class="listchild" :class="{ active: this.list.isActive }">
    <nav class="restotagcloud" v-if="this.list.id == 'resto'">
      <span
        v-for="t in this.tl"
        class="resto-tag"
        v-bind:class="{ active: t.isActive }"
        v-on:click="toggleTag(t)">
        <h3 class="b9h-lang-fr">{{ t.fr }}</h3>
        <h3 class="b9h-lang-en">{{ t.en }}</h3>
        <h3 class="b9h-lang-it">{{ t.it }}</h3>
      </span>
    </nav>

      <Accordeon v-for="i in this.list.sub" v-bind:list="i"></Accordeon>
    </section>
  </nav>
    <section
    v-if="this.list.type === 'item'"
    class="lastlistitem"
    v-show="this.list.isActive"
    >
      <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>

        <h3 class="cardtitle">{{ this.list.name }}</h3>

        <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>
            <Info v-if="i.tabtype === 'info'" v-bind:obj="i"></Info>
            <Prix v-if="i.tabtype === 'prix'" v-bind:obj="i"></Prix>
          </section>
        </section>
        </div>
        </section>

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

      </aside>
    </section>
  </section>
  `,
  props : {
    list : Object,
    taglist : Object
  },
  data () {
    return {
      tl : this.taglist,
      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 : {
    toggleTag(t){
      t.isActive = !t.isActive
      this.checkTagFunc()
    },
    checkTagFunc() {
      Object.keys(resto).forEach(r => {

        tagCount = 0

        Object.keys(restoTagList).forEach(rtli => {
          if (restoTagList[rtli].isActive) {
            for (t in resto[r].tags) {
              if (resto[r].tags[t] === restoTagList[rtli]) {
                tagCount++
              }
            }
          }
        })

        if (tagCount >= 1) {
          resto[r].isActive = true
        } else {
          resto[r].isActive = false
        }
      })

    },
    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"
          break;
        case "time":
          return "byl-icon-clock"
          break;
        case "info":
          return "byl-icon-info"
          break;
        case "prix":
          return "byl-icon-euro_symbol"
          break;
        default:
          return ""
      }
    },
    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(true);
    },
    setMap () {
      map.setView(this.dirxy, this.dirzl)
      this.list.marker.openPopup()
    }
  },
})

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');
  }

})