//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>{{ 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>{{ 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>{{ 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>{{ 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>{{ 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>{{ 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>{{ 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: 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>

        <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: {
    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)";
    },
    markerLL : function () {
      if ('card' in this.list){
try {
        return this.$refs.tabnavi[this.tabind].getBoundingClientRect().left + "px"
}catch(err) {}
      } else {
        return 0;
      }
    },
    markerWW : function () {
      if ('card' in this.list){
        try {
          target = document.querySelector("#" + this.cardid +"0");
          marker.style.left = target.offsetLeft + "px";
          return target.offsetWidth + "px";
          //return this.$refs.tabnavi[this.tabind].getBoundingClientRect().width + "px"
        }catch(err) {
          console.log(err.message)
        }
      } else {
        return 0;
      }
    },
  },
  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.setTab(0)
    },
    hideCard() {
      this.cardTop = "110vh"
    },
    donothing () {

    },
    toggleActive () {
      this.isActive = !this.isActive
      document.getElementById(this.list.id).scrollIntoView();
    }
  }
})


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: {},
    db : {
      parking : {
        id : "parking",
        type : "list",
        nameFR : "Parking",
        nameEN : "Car park",
        nameIT : "Parcheggio",
        sub : {
          lamy : {
            id: "lamy",
            type: "item",
            name: "Parking Lamy"
          }
        }
      },
      resto : {
        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 : {
                      tabtype : "menu",
                      priceRange : "18-32€",
                      dishes : {
                        divola : {
                          name : "Pizza Divola",
                        },
                        regina : {
                          name : "Pizza Regina",
                        }
                      }
                    },
                    time : {
                      tabtype : "time",
                      mon : "11h30-14h00  18h30-22h00",
                      tue : "11h30-14h00  18h30-22h00",
                      wed : "11h30-14h00  18h30-22h00",
                      thu : "11h30-14h00  18h30-22h00",
                      fri : "11h30-14h00  18h30-22h00",
                      sat : "11h30-14h00  18h30-22h00",
                      sun : "",
                    }
                  }
                }
              },
              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';
      }
    },
    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');
  }

})