const tooltiped = {
  template: `
  <div class="byl-tooltiped">
    <span class="byl-tooltip-text">{{ text }}</span>
    <slot></slot>
  </div>
  `,
  props: {
    text: String
  }
}

const hero = {
  template:`
  <div class="byl-hero">
  <a v-bind:href="link">
    <img v-bind:src="imgurl"/>
    <div class="byl-hero-fader"></div>
    <h4>{{ text }}</h4>
  </a>
  </div>
  `,
  props: {
    link: String,
    imgurl: String,
    text: String
  },
}

const mobilemenu = {
  template: `
  <nav class="byl-mobile-menu byl-mobile"
       v-bind:class="{open: toggle }">

  <slot></slot>

  </nav>
  `,
  data () {
    return {

    }
  },
  props: {
    toggle: Boolean
  },
  mounted () {
  }
}

const burger = {
  template: `
  <div class="byl-burger-container">
  <span class="byl-burger-box"
        v-bind:class="{ open: toggle }"
        >

  <span class="byl-burger-btn">
  <input class="byl-ghost-burger-checkbox"
         type="checkbox"
         v-model="toggle"
         v-on:click="toggleBurger()">
  </span>
  </span>
  </div>
  `,
  data () {
    return {
      toggle: false
    }
  },
  props: {
    mobileToggle: Boolean
  },
  mounted: function () {
    this.toggle = this.mobileToggle;
  },
  methods: {
    toggleBurger () {
      this.toggle = !this.toggle;
      this.mobileToggle = this.toggle;
      this.$emit('toggled',this.toggle);
    }
  }

}

export default {
install (Vue) {
Vue.mixin({
  data () {
    return {
      mobileToggle: false,
    }
  },
  components: { hero, burger, mobilemenu, tooltiped },
  created() {
  },
  computed: {
  },
  methods: {
    burgerToggle (value) {
      this.mobileToggle = value;
    },
    isActiveTab (name) {
      let t = 0;
      for (t in tabs) {
        let i = 0;
        let items = tabs[t].tabs
        for (i in items){
          if (items[i].label == name) {
            return items[i].selected
          }
        }
      }
    },
    setMainPadding () {
      if (document.querySelector(".byl-main") != null && document.querySelector(".byl-footer") != null) {
        document.querySelector(".byl-main").style.paddingBottom = getComputedStyle(document.querySelector(".byl-footer")).height
      }
    }
  },
  mounted: function () {
    this.setMainPadding()
    window.addEventListener('resize', this.setMainPadding)
  }

}); } };