import React from 'react';
import {StoreWatchComponent} from 'frill-core';
import CounterBlock from '../UI/CounterBlock.jsx';

/**
 * TopCounter Mediator component
 * @extends {FrillCore.StoreWatchComponent}
 * @example <caption>Usage in React component</caption>
 * <TopCounter {...this.props} />
 */
class TopCounterMediator extends new StoreWatchComponent(['Example']) {

  /**
   * Constructor
   * @param {any} props
   */
  constructor(props) {
    super(props);

    this._bind([
      'onOne',
      'onTen',
    ]);
  }

  /**
   * Count up by one
   */
  onOne() {
    this.getFrill().action('getExample').countUp();
  }

  /**
   * Count up by ten
   */
  onTen() {
    this.getFrill().action('getExample').countUpBy(10);
  }

  /**
   * getStateFromFrill
   * @listens {ExampleStore}
   */
  getStateFromFrill() {
    return {
      count: this.getFrill().store('Example').count,
    };
  }

  /**
   * render
   * @return {React DOM}
   * @see https://facebook.github.io/react/docs/component-specs.html#render
   */
  render() {
    return (
      <CounterBlock
        count={this.state.count}
        onOne={this.onOne}
        onTen={this.onTen}
      />
    );
  }
}

/**
 * Export TopCounterMediator
 */
export default TopCounterMediator;