import React, { Component } from 'react'; import store from '../store/Store'; import { actions } from '../actions/Index'; import Message from './Message'; import { reset } from 'redux-form'; import MessageForm from './MessageForm'; import ChatUtils from '../utils/ChatUtils';

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

export default class Messages extends Component {

static propTypes = {
  conversation: React.PropTypes.shape({
    senderId: React.PropTypes.number,
    conversationId: React.PropTypes.number,
    senderClass: React.PropTypes.string,
  }),
  showAll: React.PropTypes.bool.isRequired,
  messages: React.PropTypes.arrayOf(React.PropTypes.object),
};

constructor(props) {
  super(props);
};

componentDidMount() {
  store.dispatch(actions.conversation.conversation(room.dataset.room, room.dataset.currentUserId, room.dataset.currentUserClass));
}

componentWillReceiveProps(nextProps) {
  if (nextProps.messages.length != this.props.messages.length) {
    this.refreshChat();
  }
}

handleSubmit = (e) => {
  const { conversation } = this.props;
  this.refreshChat();
  store.dispatch(actions.messages.create(e.body, conversation.senderId, conversation.conversationId, conversation.senderClass));
  store.dispatch(reset('message-form'));
};

refreshChat = () => {
  store.dispatch(actions.messages.fetch(room.dataset.room));
};

showAll = () => {
  store.dispatch(actions.messages.showAll());
};

render() {
  const { messages, conversation, showAll } = this.props;

  return (
    <div>
      <div className="top_menu">
        <div className="buttons">
          <div className="button close-button" onClick={ChatUtils.closeChat}></div>
          <div className="button minimize"></div>
          <div className="button maximize"></div>
        </div>
        <div className="title">
          <div className="chat-header">
            <div className="header-description">
              <p>
                {`Chat with ${conversation.recipient}`}
              </p>
            </div>
          </div>
        </div>
        <button className="refresh-button btn" onClick={this.refreshChat}>Refresh</button>
      </div>
      <div className='chat-wrapper'>
        <div className='chat-message padding'>
          { do {
            if (messages.length >= 50 && !showAll) {
              <div className='text-center'>
                <button className='load-messages' onClick={this.showAll}>Load previous messages</button>
              </div>;
            }
          } }

          {/* TODO: Refactoring this condition. */}
          { do {
            if (messages.length >= 50 && !showAll) {
              messages.slice(Math.max(messages.length - 50, 1)).map((message, index) => {
                return (
                  <div key={index}>
                    <Message message={message} sender={conversation}/>
                  </div>
                );
              });
            } else {
              messages.map((message, index) => {
                return (
                  <div key={index}>
                    <Message message={message} sender={conversation}/>
                  </div>
                );
              });
            }
          }
          }
          <MessageForm onSubmit={this.handleSubmit}/>
        </div>
      </div>
    </div>
  );
}

}