import Ember from 'ember';

export default Ember.Component.extend({
  disabled: Ember.computed.reads('group.disabled'),
  groupName: Ember.computed.reads('group.groupName'),
  cancelClose: false,
  // Hooks
  didReceiveAttrs() {
    this._super(...arguments);
    Ember.run.scheduleOnce('actions', this, this.checkIfSubItemIsHighlighted);
  },
  
  // Methods
  calculatePosition(trigger, content) {
    let { top, left, width, height } = trigger.getBoundingClientRect();
    let { width: contentWidth,height: contentHeight } = content.getBoundingClientRect();
    let style = {
      left: left - contentWidth,
      top: top +  window.pageYOffset + (height / 2) - (contentHeight / 2) + 25
    };
    return { style };
  },
  
  checkIfSubItemIsHighlighted(){
    let highlightedOpt = this.get('select.highlighted');
    let options = this.get('group.options');
    let highlightedIsInThisGroup = options.indexOf(highlightedOpt) > -1;
    if (highlightedIsInThisGroup && !this._oldHighlightedIsInThisGroup) {
      this.get('dropdown').actions.open();
    } else if (!highlightedIsInThisGroup && this._oldHighlightedIsInThisGroup) {
      this.get('dropdown').actions.close();
    }
    this._oldHighlightedIsInThisGroup = highlightedIsInThisGroup;
  },
  
  // Actions
  actions: {

    onTriggerMouseEnter(trigger) {
      this.set('cancelClose', false);
      trigger.actions.open();
    },
    onContentMouseEnter(trigger) {
      this.set('cancelClose', true);
    },
    onContentMouseLeave(trigger) {
      trigger.actions.close();
    },
    onTriggerMouseLeave(trigger) {
      Ember.run.later((id) => {
        if(this.get('_state') !== "destroying") {
          if(!this.get('cancelClose')) {
            trigger.actions.close();
          }
          this.set('cancelClose', false);
        }
      },trigger, 100);
    },
    onClose(trigger) {

    },
    onOpen(trigger) {
      // Highlight first submenu item
      this.get('select').actions.highlight(this.get('group.options.firstObject'));
    }
  }
  
});