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 initialMessagesCount = 100;

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

  var messagesToRender;

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

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

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);
  },

  render: function() {
    if (this.state.dialog) {
      return (
        <section className="dialog">
          <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>
      )
    }
  },

  _scrollToBottom: function() {
    var ul = this.refs.MessagesSection.getDOMNode();
    ul.scrollTop = ul.scrollHeight;
  },

  _scrollToBottomDebounced: _.debounce(function() {
    this._scrollToBottom();
  }, 50),

  _scrolledToBottom: function() {
    var self = this.getDOMNode();

    return(self.scrollHeight - self.scrollTop - self.clientHeight == 0);
  },

  _onChange: _.debounce(function() {
    this.setState(getStateFromStores());

    if (this._scrolledToBottom()) {
      this._scrollToBottomDebounced()
    }
  }, 30, 300)
});

module.exports = DialogSection;

@@ -292,23 +292,54 @@
 );%0A%0Avar 
-initial
+_renderMessagesStep = 100;%0Avar _render
 Messages
@@ -480,23 +480,23 @@
 ength %3E 
-initial
+_render
 Messages
@@ -564,15 +564,15 @@
 h - 
-initial
+_render
 Mess
@@ -761,16 +761,50 @@
 %7D);%0A%7D;%0A%0A
+var _lastScrolledFromBottom = 0;%0A%0A
 var Dial
@@ -1202,16 +1202,79 @@
 ;%0A  %7D,%0A%0A
+  componentDidUpdate: function() %7B%0A    this._fixScroll()%0A  %7D,%0A%0A
   render
@@ -1367,16 +1367,42 @@
 %22dialog%22
+ onScroll=%7Bthis._onScroll%7D
 %3E%0A      
@@ -1456,16 +1456,43 @@
 er.peer%7D
+%0A                          
  message
@@ -1522,16 +1522,43 @@
 oRender%7D
+%0A                          
  ref=%22Me
@@ -1753,30 +1753,25 @@
  %7D,%0A%0A  _
-s
+fixS
 croll
-ToBottom
 : functi
@@ -1785,18 +1785,20 @@
     var 
-ul
+node
  = this.
@@ -1836,18 +1836,20 @@
 ();%0A    
-ul
+node
 .scrollT
@@ -1853,18 +1853,20 @@
 llTop = 
-ul
+node
 .scrollH
@@ -1874,42 +1874,53 @@
 ight
-;%0A  %7D,%0A%0A  _scrollToBottomDebounced
+ - _lastScrolledFromBottom;%0A  %7D,%0A%0A  _onChange
 : _.
@@ -1954,41 +1954,59 @@
 his.
-_scrollToBottom
+setState(getStateFromStores
 ()
+)
 ;%0A  %7D, 
-5
+30, 30
 0),%0A%0A  _
 scro
@@ -2005,26 +2005,29 @@
 %0A  _
-s
+onS
 croll
-edToBottom: 
+: _.debounce(
 func
@@ -2047,20 +2047,20 @@
 var 
-self
+node
  = this.
 getD
@@ -2059,38 +2059,114 @@
 his.
-getDOMNode();%0A%0A    return(self
+refs.MessagesSection.getDOMNode();%0A%0A    var scrollTop = node.scrollTop;%0A    _lastScrolledFromBottom = node
 .scr
@@ -2177,21 +2177,16 @@
 eight - 
-self.
 scrollTo
@@ -2190,83 +2190,123 @@
 lTop
- - self.clientHeight
+;%0A%0A    if (node.scrollTop
  == 0)
-;%0A  %7D,%0A%0A  _onChange: _.debounce(function(
+ %7B%0A      if (this.state.messages.length %3E this.state.messagesToRender.length
 ) %7B%0A    
 this
@@ -2305,128 +2305,250 @@
     
-this.setState(getStateFromStores());%0A%0A    if (this._scrolledToBottom()) %7B%0A      this._scrollToBottomDebounced()%0A
+    _renderMessagesCount += _renderMessagesStep;%0A%0A        if (_renderMessagesCount %3E this.state.messages.length) %7B%0A          _renderMessagesCount = this.state.messages.length;%0A        %7D%0A%0A        this.setState(getStateFromStores());%0A  
     %7D%0A  
 %7D, 3
@@ -2543,25 +2543,26 @@
     %7D%0A  
-%7D, 30, 30
+  %7D%0A  %7D, 1
 0)%0A%7D);%0A%0A

load messages on scroll top