Vue.component('sidebar-button', {
  props: {
    app: String,
    icon: String,
    active_app: String
  },
  data: function() {
    return {
      hover: false
    }
  },
  methods: {
    selector_css() {
      let result = "sidebar-selector";
      if (this.app == this.active_app) {
        result += " sidebar-selector-active";
      } else if (this.hover) {
        result += " sidebar-selector-hover";
      }
      return result;
    },    
    button_css() {
      return "sidebar-button";
    },
    select_app: function() {
      this.$emit('select-app', {name: this.app});
    },
    set_hover(hover) {
      this.hover = hover;
    }
  },
  template: `
    <div class="sidebar-button-container">
      <div :class="selector_css()">
      </div>

      <div :class="button_css()" 
        v-on:click="select_app"
        v-on:mouseover="set_hover(true)"
        v-on:mouseleave="set_hover(false)"> 

        <img :src="icon" class="sidebar-icon">
      </div>
    </div>
    `
});