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 {formatTime} from 'js/utils/formatTime';

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';

@connectToStores
@pureRender
class IssueConversation 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 
    }
  }

  static defaultProps = {
    userInfo: function() {
      return {
        username: 'Anonymous',
        avatar: 'https://vietid.net/images/new/no-avatar.gif'
      }
    },
  };

  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_type;
    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_type = last_type || type;
      last_day = last_day || dateString;


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

      if (last_type !== type) {
        last_type = type;
        group_position ++;
      }

      if (type === 'ticket') {
        group_position ++;
      }

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

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

  messageType() {
    return 'ticket'
  }

  @autobind
  senderInfo({type, sender_id, sender_uid, isFromViewer, timestamp}) {

    let style = {
      height: 50,
    }

    const renderIcon = () => {
      let icon_name = 'fa-commenting-o'
      if (type ==='ticket') {
        icon_name = 'fa-envelope'
      }

      return (
        <div className={classNames(classname.icon, classname.color)}>
          <i className={classNames('fa', icon_name)} aria-hidden="true"></i>
        </div>
      )
    }

    let userInfo = this.props.userInfo(sender_uid);

    return (
      <div className={classname.senderInfo}>
        <a className={classname.avatar}>
          <img src={userInfo.avatar || 'https://vietid.net/images/new/no-avatar.gif'}/>
        </a>
        <div>
          <div className={classname.displayMiddle} style={style}></div>
          <div className={classname.displayMiddle}>
            <h3 className={classname.color}>{userInfo.username}
              <span className="timestamp">{formatTime(timestamp)}</span>
            </h3>
          </div>
          {
            renderIcon()
          }
        </div>
      </div>
    )
  }



  render() {
    let classes = classNames(classname.issueConversation);
    let {conversation_id, viewer, maxBubbleWidth, heightMessageList, formatGroupMessage, messageGroup} = this.props;
    log.info('IssueConversation props: ',this.props);

    let _messageGroup = messageGroup || this.messageGroup;
    return (
      <div className= {classes}>
        <div className= {classname.heightInherit}>
          <MessageList conversation_id={conversation_id} viewer={viewer} messageGroup={_messageGroup} formatGroupMessage={formatGroupMessage} senderInfo={this.senderInfo} maxBubbleWidth={maxBubbleWidth}/>
        </div>
      </div>
    );
  }
}

export default IssueConversation;