import React, { Component } from 'react'; import store from '../store/Store'; import { actions } from '../actions/Index';

const room = document.getElementById('denshobato-message-panel');

export default class Message extends Component {

static propTypes = {
  message: React.PropTypes.shape({
    id: React.PropTypes.number.isRequired,
    body: React.PropTypes.string.isRequired,
    author: React.PropTypes.string.isRequired,
  }),
  sender: React.PropTypes.shape({
    author: React.PropTypes.string,
    conversationId: React.PropTypes.number,
  }),
};

deleteMessage = () => {
  let result = confirm('Delete Message from your conversation?');
  if (result) {
    store.dispatch(actions.messages.deleteMessage(this.props.message.id, this.props.sender.conversationId));
  };
};

render() {
  const { message, sender } = this.props;
  const cssClass = (message.author == sender.author) ? 'recipient' : 'sender';

  return (
    <div className={`chat-message chat-message-${cssClass}`}>
      <div className='user-info'>
        <img className='chat-image chat-image-default' src={message.avatar} />
        <span className='message-author'>{message.full_name}</span>
      </div>
      <div className='chat-message-wrapper'>
        <span className='message-time'>{message.time}</span>
        <div className='chat-message-content'>
          <p>{message.body}</p>
        </div>
        <div className='chat-details'>
          <span className='chat-message-localization font-size-small' onClick={this.deleteMessage}>Remove</span>
        </div>
      </div>
    </div>
  );
}

}