import Ember from 'ember';

export default Ember.Component.extend({
  isTooltipVisible: false,
  tooltipTarget: '',
  tooltipPortal: '',
  
  toggleTooltip() {    
    this.setTooltipPortal();
    this.setTooltipTarget();
    
    Ember.set(this, 'isTooltipVisible', !this.get('isTooltipVisible'));
  },
  
  addEventListeners() {
    this.element.parentNode.addEventListener('mouseenter', this.toggleTooltip.bind(this));
    this.element.parentNode.addEventListener('mouseleave', this.toggleTooltip.bind(this));
  },
  
  removeEventListeners() {
  	this.element.parentNode.removeEventListener('mouseenter', this.toggleTooltip);
    this.element.parentNode.removeEventListener('mouseleave', this.toggleTooltip);
  },
  
  setTooltipPortal() {
    Ember.set(this, 'tooltipPortal', document.getElementById('tooltip-portal'));
  },
  
  setTooltipTarget() {
    Ember.set(this, 'tooltipTarget', this.element.parentNode);
  },

  didInsertElement() {
    this.addEventListeners();
  },
  
  willDestroyElement() {
  	this.removeEventListeners();
  },
});