import Bloodhound from 'corejs-typeahead';
import Urls from 'urls';
import { template } from 'underscore';
import './less/typeahead.less';

/**
 * Simple wrapper function for Typeahead
 * @param {Object} element jQuery element to apply typeahead to
 * @params {Object} options Options for typeahead (template, url, select)
 * Template has to be compiled. e.g. _.template('<div>...</div>')
 */
export const typeahead = (element, options) => {
  const source = new Bloodhound({
    // Boilerplate
    datumTokenizer(d) {
      return Bloodhound.tokenizers.whitespace(d.num);
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
      url: options.url,
      wildcard: '%QUERY',
    },
  });
  element.typeahead({
    valueKey: 'id',
  }, {
    name: 'user-profiles',
    source,
    templates: {
      suggestion: options.template,
    },
    display: 'name',
  }).on('typeahead:selected typeahead:autocompleted', options.select);
};

export const plainUserTypeahead = (element, select) => {
  const plainUserSearchTemplate = template(`
    <span data-id="<%= id %>" class="user-meta"><h4><%= value %></h4>
  `);

  typeahead(element, {
    template: plainUserSearchTemplate,
    url: `${Urls.profiles_api_plain_user_search()}?query=%QUERY`,
    select,
  });
};

export const userTypeahead = (element, select) => {
  const userSearchTemplate = template(`
    <div>
      <img width="100%" src="<%= image %>" alt="" />
      <span data-id="<%= id %>" class="user-meta"><h4><%= name %></h4>
    </div>
  `);

  typeahead(element, {
    template: userSearchTemplate,
    url: `${Urls.profiles_api_user_search()}?query=%QUERY`,
    select,
  });
};

export { typeahead as default };

@@ -314,16 +314,25 @@
 , select
+, display
 )%0A * Tem
@@ -873,16 +873,35 @@
 display:
+ options.display %7C%7C
  'name',
@@ -1287,32 +1287,54 @@
 Y%60,%0A    select,%0A
+    display: 'value',%0A
   %7D);%0A%7D;%0A%0Aexport

Add configurable display option to typeahead