import React, { Component } from 'react';
import Rx, { Subject, Observable } from 'rxjs';
import { connect, combineProps } from 'rx-react-container';
import logo from './logo.svg';
import './App.css';

class AppComponent extends Component {
  render() {
    return (
      <div>
        <button onClick={this.props.onMinus}>-{this.props.step}</button>
        [<span>{this.props.totalCount}</span>]
        <button onClick={this.props.onPlus}>+{this.props.step}</button>
      </div>
    );
  }
}

function appController(container) {
  const onMinus$ = new Subject();
  const onPlus$ = new Subject();

  const click$ = Observable
        .merge(
          onMinus$.map(() => -1),
          onPlus$.map(() => 1)
        );
  const step$ = Observable.of(1);

  const totalCount$ = click$
        .startWith(0)
        .scan((acc, x) => acc + x, 0);

  return combineProps({ totalCount$, step$ }, { onMinus$, onPlus$ });
}

const App = connect(appController)(AppComponent);

export default App;