import DropdownSelectBoxComponent from "select-kit/components/dropdown-select-box";
import computed from "ember-addons/ember-computed-decorators";

export default DropdownSelectBoxComponent.extend({
  pluginApiIdentifiers: ["toolbar-popup-menu-options"],
  classNames: ["toolbar-popup-menu-options"],
  isHidden: Ember.computed.empty("computedContent"),
  showFullTitle: false,

  @computed("title")
  collectionHeader(title) {
    return `<h3>${title}</h3>`;
  },

  mutateValue(value) {
    this.sendAction("onPopupMenuAction", value);
    this.setProperties({ value: null, highlightedValue: null });
  },

  computeContent(content) {
    return content.map(contentItem => {
      if (contentItem.condition) {
        return {
          icon: contentItem.icon,
          name: I18n.t(contentItem.label),
          id: contentItem.action
        };
      }
    }).filter(contentItem => contentItem);
  },

  didInsertElement() {
    this._super();

    $("#reply-control").on("touchstart.toolbar-popup-menu-options", (event) => {
      if (this.get("isExpanded") && !this.element.contains(event.target)) {
        this.close(event);
      }
    });
  },

  willDestroyElement() {
    this._super();

    $("#reply-control").off("touchstart.toolbar-popup-menu-options");
  }
});