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

export default Ember.Component.extend({
  classNameBindings: [':modal', ':d-modal', 'modalClass', 'modalStyle'],
  attributeBindings: ['data-keyboard'],

  init() {
    this._super(...arguments);

    // If we need to render a second modal for any reason, we can't
    // use `elementId`
    if (this.get('modalStyle') !== 'inline-modal') {
      this.set('elementId', 'discourse-modal');
      this.set('modalStyle', 'fixed-modal');
    }
  },

  // We handle ESC ourselves
  'data-keyboard': 'false',

  @on("didInsertElement")
  setUp() {
    $('html').on('keydown.discourse-modal', e => {
      if (e.which === 27) {
        Em.run.next(() => $('.modal-header a.close').click());
      }
    });

    this.appEvents.on('modal:body-shown', data => {
      if (this.isDestroying || this.isDestroyed) { return; }
      if (data.fixed) {
        this.$().removeClass('hidden');
      }

      if (data.title) {
        this.set('title', I18n.t(data.title));
      } else if (data.rawTitle) {
        this.set('title', data.rawTitle);
      }
    });
  },

  @on("willDestroyElement")
  cleanUp() {
    $('html').off('keydown.discourse-modal');
  },

  click(e) {
    const $target = $(e.target);
    if ($target.hasClass("modal-middle-container") ||
        $target.hasClass("modal-outer-container")) {
      // Delegate click to modal close if clicked outside.
      // We do this because some CSS of ours seems to cover
      // the backdrop and makes it unclickable.
      $('.modal-header a.close').click();
    }
  }
});