import React from 'react';
import {Map, List} from 'Immutable';
import pureRender from 'pure-render-decorator';
import classNames from 'classnames/dedupe';
import {autobind, debounce} from 'core-decorators';
import {ScrollArea}  from 'js/components/lib';

import log from 'js/utils/log';

import {classname} from 'js/ENUM';
import {signal} from 'js/events/EventEmitter';

import connectToStores from 'alt-utils/lib/connectToStores';

import ConversationStore from 'js/flux/stores/ConversationStore';

import ConversationActions from 'js/flux/actions/ConversationActions';

import ChatDateBreak from 'components/MessageList/ChatDateBreak';
import ChatMessageGroup from 'components/MessageList/ChatMessageGroup';

@connectToStores
@pureRender
class MessageList extends React.Component {

  static getStores() {
    return [ConversationStore];
  }

  @autobind
  static getPropsFromStores(props) {
    let messages = new List();
    let messageGroups = new List();
    let ended = false;
    let gettingHistory = false;
    let next_timestamp;
    let {conversations} = ConversationStore.getState();
    let {conversation_id} = props;

    let conversation = conversations.get(`${conversation_id}`);

    if (conversation) {
      ended = conversation.getIn(['ended']);
      next_timestamp = conversation.getIn(['next_timestamp']);
      gettingHistory = conversation.getIn(['gettingHistory']);
    }
    
    if (conversation && conversation.has('messages')) {
      messages = conversation.get('messages').sortBy((message, message_id ) => {
        return parseInt(message_id);
      }).toList();
    }

    //console.log(messageGroups.toJS());
    return {
      messages: messages,
      ended: ended,
      next_timestamp: next_timestamp,
      gettingHistory: gettingHistory
    }
  }

  @debounce(0)
  componentDidMount() {
    let {conversation_id} = this.props;
    this.isScrollBottom = true;
    ConversationActions.getHistory({conversation_id});
  }

  @autobind
  @debounce(0)
  handleScroll({scrollTop, scrollHeight, offsetHeight}) {
    let {conversation_id, next_timestamp, ended, gettingHistory} = this.props;
    
    if (scrollHeight < offsetHeight) {
      this.isScrollBottom = true;
      return;
    }

    if (scrollTop < 50 && !ended && !gettingHistory) {
      this.getHistory();
    }

    

   /* if (this.isScrollBottom && !topPosition) {
      this.refs._scrollArea.scrollArea.scrollBottom();
    } else if (topPosition + containerHeight < realHeight) {
      this.isScrollBottom = false;

      if (realHeight > this.snapShotScroll.realHeight) {
        let newTopPosition = this.snapShotScroll.topPosition + realHeight - this.snapShotScroll.realHeight;
        this.snapShotScroll = {
          realHeight,
          topPosition: newTopPosition
        }

        this.refs._scrollArea.scrollArea.scrollYTo(newTopPosition);
      }
      if (scrollTop < 50 && !ended && !gettingHistory) {
        this.getHistory();
      }
    } else if (topPosition + containerHeight === realHeight) {
      this.isScrollBottom = true;
    }*/

    
    //this.refs._scrollArea.scrollArea.scrollBottom();
  }

  @debounce(0)
  getHistory() {
    let {conversation_id, next_timestamp, ended} = this.props;

    if(next_timestamp === this.next_timestamp) {
      return;
    }

    this.next_timestamp = next_timestamp;
    ConversationActions.getHistory({conversation_id: conversation_id, timestamp: next_timestamp});
  }

  @autobind
  renderMessageGroup(messages) {
      let {viewer, senderInfo, maxBubbleWidth, formatGroupMessage} = this.props;

      if (messages.length ===0) {
        return;
      }

      let {sender_id, type, timestamp, sender_uid} = messages[0];
      let isFromViewer = viewer == sender_id ? true : false;

      return (
          <ChatMessageGroup messages={messages} isFromViewer={isFromViewer} key={messages[0].timestamp} type={type} sender_id={sender_id} sender_uid={sender_uid} timestamp={timestamp} senderInfo={senderInfo} formatGroupMessage= {formatGroupMessage} maxBubbleWidth={maxBubbleWidth}/>
      )
  }

  render() {
    let classes = classNames(classname.messageList);

    let scrollbarStyles = {borderRadius: 5};

    let messageGroupFn = this.props.messageGroup;

    let {messages} = this.props;
    let messageGroups = messageGroupFn(messages);
    return (
      <ScrollArea
        speed={0.25} 
        className="area"
        contentClassName="content"
        verticalScrollbarStyle={scrollbarStyles}
        verticalContainerStyle={scrollbarStyles}
        horizontalScrollbarStyle={scrollbarStyles}
        horizontalContainerStyle={scrollbarStyles}
        smoothScrolling= {true}
        minScrollSize={40}
        ref='_scrollArea'
        onScroll= {this.handleScroll}
      >
        <div className={classes} >
          <div>
            {messageGroups.map(this.renderMessageGroup)}
          </div>
        </div>
      </ScrollArea>
    );
  }
}

export default MessageList;