import { on, observes } from "ember-addons/ember-computed-decorators";

export default Ember.Component.extend({
  @on("init")
  _init() {
    if (!this.get("site.mobileView")) {
      var classes = this.desktopClass;
      if (classes) {
        classes = classes.split(" ");
        this.set("classNames", classes);
      }
    }
  },

  tagName: "ul",
  selectedHtml: null,

  classNames: ["mobile-nav"],

  @observes("currentPath")
  currentPathChanged() {
    this.set("expanded", false);
    Ember.run.next(() => this._updateSelectedHtml());
  },

  _updateSelectedHtml() {
    const active = this.$(".active");
    if (active && active.html) {
      this.set("selectedHtml", active.html());
    }
  },

  didInsertElement() {
    this._updateSelectedHtml();
  },

  actions: {
    toggleExpanded() {
      this.toggleProperty("expanded");

      Ember.run.next(() => {
        if (this.expanded) {
          $(window)
            .off("click.mobile-nav")
            .on("click.mobile-nav", e => {
              let expander = this.$(".expander");
              expander = expander && expander[0];
              if ($(e.target)[0] !== expander) {
                this.set("expanded", false);
                $(window).off("click.mobile-nav");
              }
            });
        }
      });
    }
  }
});