(function($) {

  function reorder($container) {
    $container.find("div.nested-fields").each(function(idx, editor) {
      var $editor = $(editor);
      $editor.find('input.sort-order').val(idx + 1).trigger("changed");
    })
  }

  function initializeIngredientEditor($container, ingredientSearchEngine) {
    $container.find(".ingredient-typeahead").typeahead({

    },
    {
      name: 'ingredients',
      source: ingredientSearchEngine,
      display: function(datum) {
        return datum.name;
      }
    });
  }

  $(document).on("ready page:load", function() {

    var ingredientSearchEngine = new Bloodhound({
      datumTokenizer: function(datum) {
        return Bloodhound.tokenizers.whitespace(datum.name);
      },
      queryTokenizer: Bloodhound.tokenizers.whitespace,
      identify: function(datum) { return datum.id; },
      sorter: function(a, b) {
        if (a.name < b.name) {
          return -1;
        } else if (b.name < a.name) {
          return 1;
        } else {
          return 0;
        }
      },
      prefetch: {
        url: '/ingredients/prefetch.json',
        cache: false
      },
      remote: {
        url: '/ingredients/search.json?query=%QUERY',
        wildcard: '%QUERY'
      }
    });

    $("#step-list")
        .on("cocoon:after-insert", function(e, item) {
          reorder($(this));
        })
        .on("cocoon:after-remove", function(e, item) {
          reorder($(this));
        })
        .on('changed', 'input.sort-order', function() {
          var $this = $(this);
          var $span = $this.closest(".nested-fields").find(".sort-order-display");
          $span.html($this.val());
        });

    var $ingredientList = $("#ingredient-list");

    initializeIngredientEditor($ingredientList, ingredientSearchEngine);

    $ingredientList
        .on("cocoon:after-insert", function(e, item) {
          reorder($(this));
          initializeIngredientEditor(item, ingredientSearchEngine);
        })
        .on("cocoon:after-remove", function(e, item) {
          reorder($(this));
        });
  });


})(jQuery);