define([], function () {
  return function (distributor) {
    var container = document.createElement("ul")
    container.classList.add("filters")
    var div = document.createElement("div")

    function render(el) {
      el.appendChild(div)
    }

    function filtersChanged(filters) {
      while (container.firstChild)
        container.removeChild(container.firstChild)

      filters.forEach( function (d) {
        var li = document.createElement("li")
        var div = document.createElement("div")
        container.appendChild(li)
        li.appendChild(div)
        d.render(div)

        var button = document.createElement("button")
        button.textContent = ""
        button.onclick = function () {
          distributor.removeFilter(d)
        }
        li.appendChild(button)
      })

      if (container.parentNode === div && filters.length === 0)
        div.removeChild(container)
      else if (filters.length > 0)
        div.appendChild(container)
    }

    return { render: render,
             filtersChanged: filtersChanged
           }
  }
})