import React from 'react';
import classNames from 'classnames/dedupe';
import pureRender from 'pure-render-decorator';
import connectToStores from 'alt-utils/lib/connectToStores';
import {autobind, debounce} from 'core-decorators';

import log from 'js/utils/log';

import {classname} from 'js/ENUM';
import ConversationActions from 'js/flux/actions/ConversationActions';
import ConversationStore from 'js/flux/stores/ConversationStore';
import UserStore from 'js/flux/stores/UserStore';

import MessageList from 'components/MessageList/MessageList';
import ChatTabComposer from 'components/FormInput/ChatTabComposer';

@connectToStores
@pureRender
class ChatConversation extends React.Component {

  static getStores() {
    return [UserStore];
  }

  static getPropsFromStores(props) {

    let {viewer} = UserStore.getState();
    
    //console.log(viewer.toJS().sender_id );
    return {
      viewer: viewer.toJS().user_id 
    }
  }

  componentDidMount() {
    this.joinConversation();
  }

  @debounce(0)
  joinConversation() {
    let {conversation_id} = this.props;
    ConversationActions.joinConversation({conversation_id});
  }

  messageGroup(messages) {
    if (!messages || messages.size === 0) {
      return [];
    }

    let last_sender;
    let last_day;
    let group_position = 0;
    let messageGroups = messages.groupBy((message, message_id) => {
      var {sender_id, timestamp, type} = message;
      var date = new Date();
      date.setTime(timestamp);

      var dateString = date.toDateString();
      last_sender = last_sender || sender_id;
      last_day = last_day || dateString;


      if (last_sender !== sender_id) {
        last_sender = sender_id;
        group_position ++;
      }

      if (last_day !== dateString) {
        last_day = dateString;
        group_position ++;
      }
      return `${group_position}`;
    });

    return messageGroups.toList().toJS();
  }

  messageType() {
    return 'chat'
  }

  senderInfo({type, sender_id, isFromViewer}) {

    if (isFromViewer) {
      return null;
    }
    return (
      <div>
        <a>
          <img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xtl1/v/t1.0-1/p32x32/11026078_1043039255720407_7828282041941672369_n.jpg?oh=e927fce7448bf0f21eac4642a6aec576&amp;oe=57C92730&amp;__gda__=1472937008_f5bebcda8fdd7c2ebd04bf9fae2664a0"/>
        </a>
        Thanh Tuấn
      </div>
    )
  }

  render() {
    let classes = classNames(classname.chatConversation);
    let {conversation_id, viewer, maxBubbleWidth} = this.props;
    log.info('ChatConversation props: ',this.props);
    return (
      <div className={classes}>
        <div className={classname.heightInherit}>
          <MessageList conversation_id={conversation_id} viewer={viewer} messageGroup={this.messageGroup} senderInfo={this.senderInfo} maxBubbleWidth={maxBubbleWidth}/>
        </div>
        <div>  
          <ChatTabComposer conversation_id={conversation_id} messageType={this.messageType}/>
        </div>
      </div>
    );
  }
}

export default ChatConversation;