//const dburl = "http://localhost:3000/db"
//const dburl = "https://ed.brz9.dev/proj/map/asset/json/db.json"
const dburl = "https://ed.brz9.dev/proj/map/asset/json/endpoint/"

Vue.component('Time', {
  template : `
  <div>
<p>
  <span class="b9h-lang-fr">{{ this.days.mon.fr }}</span>
  <span class="b9h-lang-en">{{ this.days.mon.en }}</span>
  <span class="b9h-lang-it">{{ this.days.mon.it }}</span>
  <span class="hour">{{ this.obj.mon }}</span>
</p>

<p>
  <span class="b9h-lang-fr">{{ this.days.tue.fr }}</span>
  <span class="b9h-lang-en">{{ this.days.tue.en }}</span>
  <span class="b9h-lang-it">{{ this.days.tue.it }}</span>
  <span class="hour">{{ this.obj.tue }}</span>
</p>

<p>
  <span class="b9h-lang-fr">{{ this.days.wed.fr }}</span>
  <span class="b9h-lang-en">{{ this.days.wed.en }}</span>
  <span class="b9h-lang-it">{{ this.days.wed.it }}</span>
  <span class="hour">{{ this.obj.wed }}</span>
</p>

<p>
  <span class="b9h-lang-fr">{{ this.days.thu.fr }}</span>
  <span class="b9h-lang-en">{{ this.days.thu.en }}</span>
  <span class="b9h-lang-it">{{ this.days.thu.it }}</span>
  <span class="hour">{{ this.obj.thu }}</span>
</p>

<p>
  <span class="b9h-lang-fr">{{ this.days.fri.fr }}</span>
  <span class="b9h-lang-en">{{ this.days.fri.en }}</span>
  <span class="b9h-lang-it">{{ this.days.fri.it }}</span>
  <span class="hour">{{ this.obj.fri }}</span>
</p>

<p>
  <span class="b9h-lang-fr">{{ this.days.sat.fr }}</span>
  <span class="b9h-lang-en">{{ this.days.sat.en }}</span>
  <span class="b9h-lang-it">{{ this.days.sat.it }}</span>
  <span class="hour">{{ this.obj.sat }}</span>
</p>

<p>
  <span class="b9h-lang-fr">{{ this.days.sun.fr }}</span>
  <span class="b9h-lang-en">{{ this.days.sun.en }}</span>
  <span class="b9h-lang-it">{{ this.days.sun.it }}</span>
  <span class="hour">{{ this.obj.sun }}</span>
</p>

  </div>
  `,
  props : {
    obj : Object
  },
  data () {
    return {
      message : "hello from time",
      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 : {
    getTime () {
      tabtype
    }

  }
});


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">
            <p>{{ i.tabtype }}</p>
            <Time v-if="i.tabtype === 'time'" v-bind:obj="i"></Time>
          </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){
        console.log(this.list + " has a card")
        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"
      console.log(this.markerL)
    },
    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)
      console.log("showing card")
      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()
      console.log("setMap")
    }
  },
})


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() {
    console.log("mounting");
    this.setlang('fr');
    console.log("mounted");
    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');
  }

})