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

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

import { getChat, pm } from '../api';

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

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

    loadChat = (uname) => {
        const { hash } = this.props.visitor;
        this.setState({
            chats: []
        });
        if (hash && uname) {
            getChat(uname)
                .then(response => {
                    this.setState({
                        chats: response.data
                    });
                });
        }
    }

    onSend = (template) => {
        pm(template.to.uname, template.body)
        .then(res => {
            this.loadChat(this.props.match.params.user);
        }).catch(console.log)
    }

    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={{ mid: 0, timestamp: "0", to: { uname: uname } }} onSend={this.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%'
}