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: []
        };
    }
    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
                    });
                });
        }
    }

    onSend = (template) => {
        const url = `https://api.juick.com/pm?hash=${this.props.visitor.hash}`;
        let form = new FormData();
        form.append('body', template.body);
        form.append('uname', template.to.uname);
        fetch(url, {
            method: 'POST',
            body: form
        }).then(response => {
            return response.json()
        }).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%'
}