/**
 * Example usage
 * 
 * Based on Redux's counter example
 * https://github.com/gaearon/redux/tree/master/examples/counter
 */

import React, { Component, PropTypes } from 'react';
import { Dispatcher, Injector } from '../';

const INCREMENT_COUNTER = 'INCREMENT_COUNTER';
const DECREMENT_COUNTER = 'DECREMENT_COUNTER';

function counterStore(counter = 0, action) {
  switch (action.type) {
  case INCREMENT_COUNTER:
    return counter + 1;
  case DECREMENT_COUNTER:
    return counter - 10;
  default:
    return counter;
  }
}

function increment() {
  return {
    type: INCREMENT_COUNTER
  };
}

function decrement() {
  return {
    type: DECREMENT_COUNTER
  };
}

export default class CounterApp {
  render() {
    return (
      <Dispatcher
        // Instead of specifying an object of keys mapped to stores, just use a
        // higher-order store!
        store={(state = {}, action) => ({
          counter: counterStore(state.counter, action)
        })}
      >
        {() => (
          <Injector actions={{ increment, decrement }}>
            {({ actions, atom }) => (
              <Counter
                increment={actions.increment}
                decrement={actions.decrement}
                counter={atom.counter}
              />
            )}
          </Injector>
        )}
      </Dispatcher>
    );
  }
}

class Counter {
  static propTypes = {
    increment: PropTypes.func.isRequired,
    decrement: PropTypes.func.isRequired,
    counter: PropTypes.number.isRequired
  };

  render() {
    const { increment, decrement, counter } = this.props;

    return (
      <p>
        Clicked: {counter} times
        {' '}
        <button onClick={increment}>+</button>
        {' '}
        <button onClick={decrement}>-</button>
      </p>
    );
  }
}