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

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

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

    this._bind([
      'onFetchItems',
    ]);
  }

  /**
   * Fetch items
   */
  onFetchItems() {
    this.getFrill()
      .action('getExample')
      .loadScrollItems(this.state.scrollItemsCount, 5);
  }

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

  /**
   * render
   * @return {React DOM}
   * @see https://facebook.github.io/react/docs/component-specs.html#render
   */
  render() {
    return (
      <ScrollBlock
        fetchData={this.onFetchItems}
        itemsCount={this.state.scrollItemsCount}
        itemTotal={this.state.scrollItemTotal}>
          <h4>Scroll down the box ...</h4>
          <ScrollList items={this.state.scrollItems} />
      </ScrollBlock>
    );
  }
}

/**
* Export TopScrollBlockMediator
*/
export default TopScrollBlockMediator;