// TODO: Make this a proper ES6 import
var ComposerView = require('discourse/views/composer').default;
ComposerView.on("initWmdEditor", function(){
  if (!Discourse.SiteSettings.enable_emoji) { return; }

  var template = Handlebars.compile("<div class='autocomplete'>" +
                                   "<ul>" +
                                      "{{#each options}}" +
                                          "<li>" +
                                            "<a href='#'>" +
                                            "<img src='{{src}}' class='emoji'> " +
                                            "{{code}}</a>" +
                                          "</li>" +
                                      "{{/each}}" +
                                   "</ul>" +
                                "</div>");

  $('#wmd-input').autocomplete({
    template: template,
    key: ":",
    transformComplete: function(v){  return v.code + ":"; },
    dataSource: function(term){
      return new Ember.RSVP.Promise(function(resolve) {
        var full = ":" + term;
        term = term.toLowerCase();

        if (term === "") {
          return resolve(["smile", "smiley", "wink", "sunny", "blush"]);
        }

        if (Discourse.Emoji.translations[full]) {
          return resolve([Discourse.Emoji.translations[full]]);
        }

        var options = Discourse.Emoji.search(term, {maxResults: 5});

        return resolve(options);
      }).then(function(list) {
        return list.map(function(i) {
          return {code: i, src: Discourse.Emoji.urlFor(i)};
        });
      });
    }
  });
});