import React , { Component } from 'react'
import './index.css'
import ChatHeader from './components/Header/ChatHeader'
import ChatContent from './components/ChatContent/ChatContent'
import MessageForm from './components/messageForm/messageForm'

class ChatContainer extends Component {
    constructor(props){
        super(props)
        this.state = {'active' : false , 'class' :'chat-container'}
        this.handleClick = this.handleClick.bind(this)
    }
    handleClick() {
        this.setState(isOpen => ({
            'active' : !isOpen
        }))
    }
    render(){
        return(
            <div className={this.state.active ? 'chat-container chat-open' : this.state.class } >
                <ChatHeader onClick={this.handleClick}/> // daciuk isso não ta funcionando
                <ChatContent/>
               <MessageForm />
            </div>
        )
    }
}

export default ChatContainer