/*global document*/
var WidgetList = require("widget-list")
var map = require("reducers/map")
var fold = require("reducers/fold")
var expand = require("reducers/expand")
var events = require("dom-reduce/event")
var console = require("console")

var input = [{
    id: "one"
    , value: "one"
    , eventType: "add"
}, {
    id: "two"
    , value: "two"
    , eventType: "add"
}, {
    id: "three"
    , value: "three"
    , eventType: "add"
}, {
    id: "three"
    , eventType: "remove"
}]

/* Widget in this case just creates an input and appends it
    to the body.

It sets the initial value to the value given and returns a stream
    of changes to that value

*/
var values = WidgetList(input, function create(x) {
    var input = document.createElement("input")
    input.value = x.value
    document.body.appendChild(input)

    var widget = map(events(input, "keypress"), function (ev) {
        console.log("ev", ev)
        return { value: input.value, id: x.id }
    })

    widget.view = input

    return widget
}, function destroy(widget) {
    widget.view.parentNode.removeChild(widget.view)
})

/* When we consume the values we are consuming a flat stream
    of all the changes to all the inputs
*/
fold(values, function (changes) {
    console.log("change", changes)
    // { value: textContentThing }
})

var widgets = require("widget-list/widgets")
var List = require("widget-list")

var list = List(...)

var currentWidgets = widgets(list)
// [[Widget, id], [Widget, id], ...]