<script>

import Vue from 'vue'

import router from 'vuejs/route'

export default {
  name: "LanguageSwitcher",
  router,
  props:['id','dom_html'],
  data() {
    return {
      html: null,
      template: null
    }
  },
  beforeMount() {
    console.log("beforeMount languageSwitcher", this.dom_html)
    if (!this.template) {
      console.log('no languageswitcher template')
      if (this.dom_html) { // if html prop is available
        this.html = this.dom_html
        this.compileTemplate()
      }
    }
  },
  methods: {
    compileTemplate(){
      console.log("languageSwitcher compileTemplate html", this.html)
      this.template = Vue.compile(this.html)
      // https://github.com/vuejs/vue/issues/9911
      this.$options.staticRenderFns = [];
      this._staticTrees = [];
      this.template.staticRenderFns.map(fn => (this.$options.staticRenderFns.push(fn)));
      console.log("languageSwitcher compileTemplate template", this.template)
    },
    onTapLanguageSwitcher (e) {
      console.log('onTapLanguageSwitcher', e)
      let tapped = e.target.parentNode.parentNode.querySelectorAll('.tapped')
      tapped.forEach((item, i) => {
        item.classList.remove('tapped')
      })
      e.target.parentNode.classList.add('tapped')
    }
  },
  render(h) {
    console.log('languageswitcher render')
    if (!this.template) {
      return h('span', $t('default.Loading…'))
    } else {
      return this.template.render.call(this)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
