var _ = require('lodash');

var React = require('react');

var MessagesSection = require('./dialog/MessagesSection.react');
var ComposeSection = require('./dialog/ComposeSection.react');

var DialogStore = require('../stores/DialogStore');
var MessageStore = require('../stores/MessageStore');

var _renderMessagesStep = 20;
var _renderMessagesCount = 10;

var getStateFromStores = function() {
  var messages = MessageStore.getAll();

  var messagesToRender;

  if (messages.length > _renderMessagesCount) {
    messagesToRender = messages.slice(messages.length - _renderMessagesCount);
  } else {
    messagesToRender = messages;
  }

  return({
    dialog: DialogStore.getSelectedDialog(),
    messages: messages,
    messagesToRender: messagesToRender
  });
};

var _lastScrolledFromBottom = 0;

var DialogSection = React.createClass({
  getInitialState: function() {
    return(getStateFromStores());
  },

  componentDidMount: function() {
    DialogStore.addSelectListener(this._onChange);
    MessageStore.addChangeListener(this._onChange);
  },

  componentWillUnmount: function() {
    MessageStore.removeChangeListener(this._onChange);
    DialogStore.removeSelectListener(this._onChange);
  },

  componentDidUpdate: function() {
    this._fixScroll();
    this._loadMessagesByScroll();
  },

  render: function() {
    if (this.state.dialog) {
      return (
        <section className="dialog" onScroll={this._loadMessagesByScroll}>
          <MessagesSection peer={this.state.dialog.peer.peer}
                           messages={this.state.messagesToRender}
                           ref="MessagesSection"/>
          <ComposeSection dialog={this.state.dialog}/>
        </section>
      )
    } else {
      return(
        <section className="dialog"></section>
      )
    }
  },

  _fixScroll: function() {
    var node = this.refs.MessagesSection.getDOMNode();
    node.scrollTop = node.scrollHeight - _lastScrolledFromBottom;
  },

  _onChange: _.debounce(function() {
    this.setState(getStateFromStores());
  }, 10, {maxWait: 50, leading: true}),

  _loadMessagesByScroll: _.debounce(function() {
    var node = this.refs.MessagesSection.getDOMNode();

    var scrollTop = node.scrollTop;
    _lastScrolledFromBottom = node.scrollHeight - scrollTop;

    if (node.scrollTop == 0) {
      if (this.state.messages.length > this.state.messagesToRender.length) {
        _renderMessagesCount += _renderMessagesStep;

        if (_renderMessagesCount > this.state.messages.length) {
          _renderMessagesCount = this.state.messages.length;
        }

        this.setState(getStateFromStores());
      }
    }
  }, 10)
});

module.exports = DialogSection;

@@ -284,24 +284,62 @@
 geStore');%0A%0A
+var _initialRenderMessagesCount = 10;%0A
 var _renderM
@@ -356,16 +356,17 @@
 p = 20;%0A
+%0A
 var _ren
@@ -384,18 +384,43 @@
 Count = 
-10
+_initialRenderMessagesCount
 ;%0A%0Avar g
@@ -1037,32 +1037,46 @@
 istener(this._on
+SelectedDialog
 Change);%0A    Mes
@@ -1103,32 +1103,40 @@
 istener(this._on
+Messages
 Change);%0A  %7D,%0A%0A 
@@ -1209,32 +1209,40 @@
 istener(this._on
+Messages
 Change);%0A    Dia
@@ -1279,16 +1279,30 @@
 this._on
+SelectedDialog
 Change);
@@ -2062,16 +2062,126 @@
 ,%0A%0A  _on
+SelectedDialogChange: function() %7B%0A    _renderMessagesCount = _initialRenderMessagesCount;%0A  %7D,%0A%0A  _onMessages
 Change: 

reset renderMessagesCount on selected dialog change