import React from 'react';
import moment from 'moment';

import PM from './PM';
import MessageInput from './MessageInput';

export default class Chat extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            chats: []
        };
        this.loadChat = this.loadChat.bind(this);
    }
    componentWillMount() {
        this.loadChat(this.props.match.params.user);
    }

    loadChat(uname) {
        const { hash } = this.props.visitor;
        this.setState({
            chats: []
        });
        if (hash && uname) {
            fetch(`https://api.juick.com/pm?uname=${uname}&hash=${hash}`)
                .then(response => response.json())
                .then(jsonResponse => {
                    this.setState({
                        chats: jsonResponse
                    });
                });
        }
    }

    render() {
        const { chats } = this.state;
        const uname = this.props.match.params.user;
        return (
            <div id="content">
                <article>

        { uname ? (
            <div className="chatroom">
                <ul style={chatStyle} ref="chats">
                      {
                          chats.map((chat) =>
                              <PM key={moment.utc(chat.timestamp).valueOf()} chat={chat} />
                          )
                     }
                 </ul>
                 <MessageInput data={{}} onSend={()=>{}}/>
            </div>
            ) : (
                   <div className="chatroom no-selection"><p>No chat selected</p></div>
        )
       }
       </article>
       </div>
        )
    }
}

const chatStyle = {
    boxSizing: 'border-box',
    padding: '0 20px',
    overflowY: 'scroll',
    height: '450px',
    display: 'flex',
    flexDirection: 'column-reverse',
    width: '100%'  
}