import React from 'react';
import { Observable } from 'rxjs';
import { connect, reducer } from '@rxx/core';

function stream(source, initialState) {
  return {
    view: reducer(
      source,
      (states, payload) => {
        switch (payload.type) {
          case 'COUNTER::PLUS':
            return { ...states, count: states.count + 1 };
          case 'COUNTER::MINUS':
            return { ...states, count: states.count - 1 };
          default:
            return states;
        }
      },
      initialState
    )
  }
}

/**
 * Root component must decorated by connect like redux.
 */
@connect({
  mapIntentToProps(intent) {
    return {
      onPlus: intent.callback('COUNTER::PLUS'),
      onMinus: intent.callback('COUNTER::MINUS'),
    }
  },
  mapStateToProps(state) {
    return {
      value: state.counter.count
    }
  }
})
class View extends React.Component {
  render() {
    return (
      <div>
        <button onClick={this.props.onPlus}>Plus</button>
        <button onClick={this.props.onMinus}>Minus</button>
        <div>conter value is {this.props.value}</div>
      </div>
    );
  }
}

const view = makeView(<View/>);
const app = makeApp({counter: stream});
const Component = app(view({counter: {count: 0}}));

render(
  <Component />
  document.querySelector('#app')
);