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

// - [ ] Showing all messages 
// To get a list of messages, make a GET request to "/messages" when the app loads.
// Find a way to display the results using the MessageList and Message components.
// fetch("/messages")
//     .then(r => r.json())
//     .then(data => console.log(data))

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

class App extends React.Component {
    state = {
        darkMode: false,
        currentUser: { id: "1", username: "You" }
    }
    
    handleToggleDarkMode = darkMode => {
        this.setState({ darkMode })
    }
    
    render() {
        const { darkMode, currentUser } = this.state
        return (
            <main className={darkMode ? "dark-mode" : ""}>
                <Header darkMode={darkMode} onToggleDarkMode={this.handleToggleDarkMode} />
                <Search />
                <MessageList />
                <NewMessage currentUser={currentUser} />
            </main>
        );
    }
}

export default App