const { X, x } = xreact
function xmount(component, dom) { ReactDOM.render(React.createFactory(X)({}, component), dom) }

// Intent union type
interface Inc {
  kind: 'inc'
}
interface Dec {
  kind: 'dec'
}
type Intent = Inc | Dec

// State
interface CounterProps {
  count: number
  actions: Actions<Intent>
}


const CounterView: React.SFC<CounterProps> = ({actions, count}) => (
  <div>
    <button onClick={actions.dec}>-</button>
    <span>{count}</span>
    <button onClick={actions.inc}>+</button>
  </div>
)

CounterView.defaultProps = {count: 0}

const plan = (intent$) => {
  return {
    update$: intent$.map(intent => {
      // now the switch is Type Safe
      switch (intent.kind) {
        case 'inc':
          return state => ({ count: state.count + 1 });
        case 'dec':
          return state => ({ count: state.count - 1 });
        default:
          return _ => _;
      }
    }),
    actions: {
      inc: () => ({ kind: 'inc' } as Inc),
      dec: () => ({ kind: 'dec' } as Dec)
    }
  }
}

const Counter = x(plan)(CounterView);

xmount(<Counter/>,
  document.getElementById('app')
);