import Ember from 'ember';
import layout from './template';
import Registry from '../../mixins/registry';
import ControlState from '../../mixins/control-state';
import KeyBindings from '../../mixins/key-bindings';

export default Ember.Component.extend(Registry, ControlState, KeyBindings, {
  layout: layout,

  tagName: 'deluge-dropdown-menu',

  classNames: ['deluge-dropdown-menu'],

  attributeBindings: [
    'autocomplete:aria-autocomplete',
  ],

  autocomplete: 'none',

  /**
   * Indicates that we will handle the default action of a child element
   *
   * @type {Boolean}
   */
  acceptsChildActions: true,

  /**
   * Name of the action which handles the item activate action
   *
   * @type {String}
   */
  childActionName: 'itemSelected',

  keyBindings: {
    'esc': 'close',
  },

  /**
   * Indicates the currently selected items, by value.
   *
   * @readOnly
   * @type {Array}
   */
  selection: Ember.A(),

  open() {
    const menuButton = this.get('button');
    if (!menuButton) { return; }
    menuButton.send('open');
  },

  close() {
    const menuButton = this.get('button');
    if (!menuButton) { return; }
    menuButton.send('close');
  },

  focusOut() {
    const button = this.get('button');
    if (!button) { return; }
    Ember.run.next(this, function(){
      if (button.$().has(document.activeElement).length === 0) {
        button.send("close");
      }
    });
  },

  actions: {
    itemSelected(values) {
      console.log('[dropdown-menu] item selected', values);

      this.sendAction('selection-changed', values);

      Ember.run.later(this, this.close, 125);
    },

    registerButton(buttonComponent) {
      this.set('button', buttonComponent);

      console.log('>',this.get('selection'));

      // buttonComponent.set('selection', this.get('selection'));
    },

    deregisterButton() {
      this.set('button', null);
    },
  }
});

@@ -793,22 +793,484 @@
 ,%0A  %7D,%0A%0A
+  didInsertElement() %7B%0A    this.addGlobalEventHandlers();%0A  %7D,%0A%0A  willDestroyElement() %7B%0A    this.removeGlobalEventHandlers();%0A  %7D,%0A%0A  addGlobalEventHandlers() %7B%0A    document.addEventListener('click', this.handleRootClick.bind(this));%0A  %7D,%0A%0A  removeGlobalEventHandlers() %7B%0A    document.removeEventListener('click', this.handleRootClick.bind(this));%0A  %7D,%0A%0A  handleRootClick(event) %7B%0A    if (!this.element.contains(event.target)) %7B%0A      this.close();%0A    %7D%0A  %7D,%0A%0A
   /**%0A
-
    * Ind
@@ -1633,16 +1633,19 @@
 %0A  %7D,%0A%0A 
+ //
  focusOu
@@ -1647,24 +1647,27 @@
 cusOut() %7B%0A 
+ //
    const but
@@ -1685,32 +1685,35 @@
 get('button');%0A 
+ //
    if (!button) 
@@ -1725,16 +1725,19 @@
 urn; %7D%0A 
+ //
    Ember
@@ -1766,20 +1766,23 @@
 on()%7B%0A  
+//
     
+ 
 if (butt
@@ -1829,24 +1829,27 @@
 h === 0) %7B%0A 
+ //
        butto
@@ -1866,16 +1866,19 @@
 ose%22);%0A 
+ //
      %7D%0A 
@@ -1882,15 +1882,21 @@
 %7D%0A  
+//
   
+ 
 %7D);%0A 
+ //
  %7D,%0A

Use document click to handle closing outside