import * as React from 'react'
import {ChangeEvent} from 'react'
import * as ReactDom from 'react-dom'
import {Struct, LeafRef} from 'ts-immutable-struct'
import {Component} from 'ts-react-struct'
 
interface Props extends React.HTMLProps<HTMLInputElement> {
  valueRef: LeafRef<string>,
}
 
class Input extends Component<Props> {
  onChange = (event: ChangeEvent<HTMLInputElement>) => {
    this.props.valueRef.val(event.target.value,event)
  }
 
  render() {
    let props: Props = Object.assign({}, this.props)
    delete props.valueRef
    return <input {...props} value={this.props.valueRef.deref()} onChange={this.onChange} />
  }
}
 
let data = Struct({
  value: 'ahoy',
})
 
function render() {
  return ReactDom.render(<Input valueRef={data.get('value')} />, document.getElementById('content'))
}
render()
 
data.observe((event, oldVal, newVal) => {
  render()
})

data.get('value').deref()
// => "ahoy"
 
data.get('value').val('hola')
// => Input gets rerendered as <input value="hola" />
 
// <= user types "hey" into input field
data.get('value').deref() // => "hey"