import React, { PropTypes, Component } from 'react'
import Unread from './Unread'
import Participant from './Participant'
import Message from './Message'

class MapChat extends Component {
  render = () => {
    const rightOffset = this.props.isOpen ? '-300px' : '0'
    return (
      <div className="chat-box"
        style={{ right: rightOffset }}
      >
        <div className="junto-header">
          PARTICIPANTS
          <div className="video-toggle" />
          <div className="cursor-toggle" />
        </div>
        <div className="participants">
          <div className="conversation-live">
            LIVE
						<span className="call-action leave" onClick={this.props.leaveCall}>
							LEAVE
						</span>
						<span className="call-action join"  onClick={this.props.joinCall}>
							JOIN
						</span>
          </div>
        </div>
        <div className="chat-header">
          CHAT
          <div className="sound-toggle"></div>
        </div>
        <div className="chat-button">
          <div className="tooltips">Chat</div>
          <Unread count={this.props.unreadMessages} />
        </div>
        <div className="chat-messages"></div>
        <textarea className="chat-input" placeholder="Send a message..." />
      </div>
    )
  }
}

MapChat.propTypes = {
  isOpen: PropTypes.bool,
  leaveCall: PropTypes.func,
  joinCall: PropTypes.func,
  participants: PropTypes.arrayOf(PropTypes.shape({
    color: PropTypes.string, // css color
    id: PropTypes.number,
    image: PropTypes.string, // image url
    self: PropTypes.bool,
    username: PropTypes.string
  }))
}

export default MapChat