import React from 'react'
import Header from './Header'
import Search from './Search'
import MessageList from './MessageList'
import NewMessage from './NewMessage'

// We'll be building out these features:
// - [x] Dark mode toggle
// - [x] Showing all messages 
// - [ ] Creating a new message

// Make a POST request to "/messages"
// The body of the request should be an object:
// { userId: "1", body: "message body" }
// You can use the currentUser id from the App component for the userId
// (just remember to pass it down as a prop).
// After getting a response from the POST request,
// add the new message to the list of messages in our app.

// - [ ] Searching by message text
// - [ ] *Bonus* Deleting a message
// - [ ] *Bonus* Editing a message

class App extends React.Component {
    state = {
        messages: [],
        darkMode: true,
        currentUser: { id: "1", username: "You" }
    }
    
    componentDidMount() {
        fetch("/messages")
            .then(r => r.json())
            .then(data => {
                this.setState({
                    messages: data.messages
                })
            })
    }
    
    handleToggleDarkMode = darkMode => {
        this.setState({ darkMode })
    }
    
    render() {
        const { darkMode, currentUser, messages } = this.state
        return (
            <main className={darkMode ? "dark-mode" : ""}>
                <Header darkMode={darkMode} onToggleDarkMode={this.handleToggleDarkMode} />
                <Search />
                <MessageList messages={messages} />
                <NewMessage currentUser={currentUser} />
            </main>
        );
    }
}

export default App