import React from 'react';
import ReactRouterPropTypes from 'react-router-prop-types';
import { UserType } from './Types';
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: []
        };
    }
    componentDidMount() {
        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
                    });
                });
        }
    }

    onMessage = (msg) => {
        if (msg.user.uname === this.props.match.params.user) {
            this.setState({
                chats: [msg, ...this.state.chats]
            });
        }
    }

    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 className="msgs">
                <article className="msg-cont">

                    {uname ? (
                        <div className="chatroom">
                            <ul style={chatStyle}>
                                {
                                    chats.map((chat) =>
                                        <PM key={moment.utc(chat.timestamp).valueOf()} chat={chat} {...this.props} />
                                    )
                                }
                            </ul>
                            <MessageInput data={{ mid: 0, timestamp: '0', to: { uname: uname } }} onSend={this.onSend}>
                                Reply...
                            </MessageInput>
                        </div>
                    ) : (
                            <div className="chatroom no-selection"><p>No chat selected</p></div>
                        )
                    }
                </article>
            </div>
        );
    }
}

Chat.propTypes = {
    visitor: UserType.isRequired,
    match: ReactRouterPropTypes.match.isRequired
};

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