/* Please direct questions to Hansi Xu (Wallace LaWall on Discord) */

import React from 'react';
import './chats.css'
import Chat from './Chat'
import Contact from './Contact'

class ChatWindow extends React.Component {
    render() {
        return (
            <div class="chatcomponent">
                <UserList />
                <MessageList />
            </div>
        )
    }
    test() {
        alert("test")
    }
}

class UserList extends React.Component {
    render() {
        return (
            <div class="contactlist">
                    <Contact pfpsrc="./chief.jpg" name="Master Chief"/>
                    <Contact pfpsrc="./freeman.jpg" name="Gordon Freeman" />
                    <Contact pfpsrc="./shogun.jpg" name="Raiden Shogun" selected="true" />
            </div>
        )
    }
}

class MessageList extends React.Component {
    render() {
        return (
            <div class="messagelist">
                    <div class="chatbubble-container">                    
                        <div class="chatbubble right">
                            Got time for tennis this week, Raiden?
                        </div>
                    </div>
                    <div class="chatbubble-container">                    
                        <div class="chatbubble left">
                            Foolish question. If I do not even have free time, How am I to pursue eternity and fulfill my promise to the people of Inazuma?
                        </div>
                    </div>
                    <div class="chatbubble-container">
                        <div class="chatbubble right">
                            Aiight, see you at 4
                        </div>
                    </div>
                    <div class="chatbubble-container">                    
                        <div class="chatbubble left">
                            As you wish.
                        </div>
                    </div>
                </div>
        )
    }
}
// class ChatWindow extends React.Component {
//     render() {
//         return (
//             <div>
//                 <ChatUserList />
//                 {/* <MessageList /> */}
//             </div>
//         )
//     }
// }
class ChatInput extends React.Component {
    render() {
        return (<p>Placeholder</p>)
    }
}
export default ChatWindow;