import React from 'react';
import classNames from 'classnames/dedupe';
import pureRender from 'pure-render-decorator';

import log from 'js/utils/log';
import {formatTime} from 'js/utils/formatTime';

import {classname} from 'js/ENUM';

import ChatBuble from 'components/MessageList/ChatBuble';

@pureRender
class ChatMessage extends React.Component {

  render() {
    let {message, isFromViewer, maxBubbleWidth} = this.props;

  	let message_classes = classNames(classname.message, {[classname.myMessage]: isFromViewer}, {[classname.yourMessage]: !isFromViewer});
    let message_margin_for_avatar = classNames(classname.messageMarginAvatar);
    let message_position_class = classNames(classname.messagePosition);
    return (
      <div className={message_classes} data-timestamp={message.timestamp}>
            <div className={message_margin_for_avatar}> 
        		  <div className={message_position_class}>
            		<ChatBuble message={message} maxBubbleWidth={maxBubbleWidth}/>
            	</div>
            </div>
      </div>
    );
  }
}

export default ChatMessage;