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 ChatMessage from 'components/MessageList/ChatMessage';

@pureRender
class ChatMessageGroup extends React.Component {
  render() {
  	let classes = classNames(classname.messageGroup);
    let {messages, isFromViewer , sender_id, sender_uid, type, senderInfo, timestamp, maxBubbleWidth, formatGroupMessage} = this.props;

    const renderMessageInGroup = () => {
      if (formatGroupMessage) {
        return (
          <div dangerouslySetInnerHTML={{__html: formatGroupMessage(messages)}}/>
        )
      } else {
        return (
          <div> 
            {senderInfo({isFromViewer , sender_id, sender_uid, type, timestamp})}
            <div> 
                {messages.map(function(message) {
                    return <ChatMessage key={message.message_id} message={message} isFromViewer={isFromViewer} maxBubbleWidth={maxBubbleWidth}/>;
                })}
            </div>
          </div>
        )
      }
    }

    return (
  		<div className={classes}  data-fromviewer={isFromViewer}>
      		{renderMessageInGroup()}
  		</div>
    );
  }
}

export default ChatMessageGroup;