require 'react'

class TodoList < React::Component
  def render
    ul(
      props[:items].map { |item|
        li({key: item[:id]}, [ item[:text] ])
      }
    )
  end
end

class TodoApp < React::Component

  def initial_state
    { items: [], text: '' }
  end

  def onChange(e)
    set_state({text: e.target.value})
  end

  def handleSubmit(e)
    e.preventDefault()
    now = Time.now
    new_item = [{ text: state[:text], id: now.to_i * 1e6 + now.usec }]
    set_state(
      items: state[:items] + new_item,
      text:  ''
    )
  end

  def render
    div([
      h3('TODO'),
      TodoList(items: state[:items]),
      form({onSubmit: method(:handleSubmit)}, [
        input(onChange: method(:onChange), value: state[:text]),
        button("Add ##{state[:items].count+1}")
      ])
    ])
  end

end

TodoApp.run()