<p>
  Write a comma separated list then press enter. Ex: js, deno
</p>

<form id="someform" action="#">
  <label for="someinput">Tags: </label>
  <input id="someinput" type="text">
  <button> Add </button>
  <button id="somesend"> Send </button>
</form>
<p id="tag_container"></p>

import Stream from 'https://cdn.pika.dev/mithril-stream@^2.0.0';

function union(one, another) {
  const set = new Set([...one, ...another]);
  return Array.from(set);
}

function to_str(tags) {
  return tags.map(t => t.length ? `#${t}`: '').join(' ');
}

function to_list(data) {
  return Array.isArray(data) 
    ? data 
    : data.split(',').map(s => s.trim());
}

function update_container(text) {
  window.tag_container.textContent = text;
}

function Tags(init = []) {
  const input = Stream(init);
  const new_list = input.map(to_list);

  const state = Stream.scan(union, [], new_list);
  state.map(to_str).map(update_container);
  
  input.get = state;

  return input;
}

let tags = Tags(['node', 'js']);

window.someform.addEventListener('submit', function(ev) {
  ev.preventDefault();
  tags(ev.target[0].value);
  ev.target[0].value = '';
});

window.somesend.addEventListener('click', function(ev) {
  ev.preventDefault();
  const result = `Send tags: ${tags.get().join(', ')}`;
  
  tags = Tags([]);
  update_container(result);
});