//= require thredded/core/on_page_load
//= require thredded/components/user_textcomplete
//= require autosize

(() => {
  const Thredded = window.Thredded;
  const autosize = window.autosize;

  const COMPONENT_SELECTOR = '[data-thredded-users-select]';

  Thredded.UsersSelect = {
    DROPDOWN_MAX_COUNT: 6,
  };

  function parseNames(text) {
    const result = [];
    let current = [];
    let currentIndex = 0;
    let inQuoted = false;
    let inName = false;
    for (let i = 0; i < text.length; ++i) {
      const char = text.charAt(i);
      switch (char) {
        case '"':
          inQuoted = !inQuoted;
          break;
        case ' ':
          if (inName) current.push(char);
          break;
        case ',':
          if (inQuoted) {
            current.push(char);
          } else {
            inName = false;
            if (current.length) {
              result.push({name: current.join(''), index: currentIndex});
              current.length = 0;
            }
          }
          break;
        default:
          if (!inName) currentIndex = i;
          inName = true;
          current.push(char);
      }
    }
    if (current.length) result.push({name: current.join(''), index: currentIndex});
    return result;
  }

  const initUsersSelect = (textarea) => {
    autosize(textarea);
    // Prevent multiple lines
    textarea.addEventListener('keypress', (evt) => {
      if (evt.keyCode === 13 || evt.keyCode === 10) {
        evt.preventDefault()
      }
    });
    const editor = new Textcomplete.editors.Textarea(textarea);
    const textcomplete = new Textcomplete(editor, {
      dropdown: {
        className: Thredded.UserTextcomplete.DROPDOWN_CLASS_NAME,
        maxCount: Thredded.UsersSelect.DROPDOWN_MAX_COUNT,
      },
    });

    const searchFn = Thredded.UserTextcomplete.searchFn({
      url: textarea.getAttribute('data-autocomplete-url'),
      autocompleteMinLength: parseInt(textarea.getAttribute('data-autocomplete-min-length'), 10)
    });
    textcomplete.on('rendered', function() {
      if (textcomplete.dropdown.items.length) {
        textcomplete.dropdown.items[0].activate();
      }
    });
    textcomplete.register([{
      index: 0,
      match: (text) => {
        const names = parseNames(text);
        if (names.length) {
          const {name, index} = names[names.length - 1];
          const matchData = [name];
          matchData.index = index;
          return matchData;
        } else {
          return null;
        }
      },
      search (term, callback, match) {
        searchFn(term, function(results) {
          const names = parseNames(textarea.value).map(({name}) => name);
          callback(results.filter((result) => names.indexOf(result.name) === -1));
        }, match);
      },
      template: Thredded.UserTextcomplete.formatUser,
      replace  ({name}) {
        if (/,/.test(name)) {
          return `"${name}", `
        } else {
          return `${name}, `
        }
      }
    }]);
  };

  function destroyUsersSelect(textarea) {
    autosize.destroy(textarea);
  }

  window.Thredded.onPageLoad(() => {
    Array.prototype.forEach.call(document.querySelectorAll(COMPONENT_SELECTOR), (node) => {
      initUsersSelect(node);
    });
  });

  document.addEventListener('turbolinks:before-cache', () => {
    Array.prototype.forEach.call(document.querySelectorAll(COMPONENT_SELECTOR), (node) => {
      destroyUsersSelect(node);
    });
  });

})();