import React, { Component } from 'react';
import firebase from '../data/firebase'

class Index extends Component {
  constructor() {
    super();
    this.state = {
      username: '',
      message: '',
      messageList: [],
    }
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  componentDidMount() {
    const messageListRef = firebase.database().ref('messages');
    messageListRef.on('value', (snapshot) => {
      let messages = snapshot.val();
      let newState = [];
      for (let message in messages) {
        newState.push({
          id: message,
          message: messages[message].message,
          username: messages[message].username
        });
      }
      this.setState({
        messageList: newState
      });
    });
  }

  handleChange(e) {
    this.setState({
      [e.target.name]: e.target.value
    });
  }

  handleSubmit(e) {
    const {username, message} = this.state
    e.preventDefault();
    const messagesRef = firebase.database().ref('messages');
    const messageObject = {
      username: username,
      message: message,
    }
    messagesRef.push(messageObject);
    this.setState({
      message: ''
    });
  }
  renderMessageList() {
    const {messageList} = this.state
    return (
      <div>
        {messageList.map((message) => {
          return (
            <div key={message.id}>
              <p>
                {message.message}
                <br/>
                <small>Author: {message.username}</small>
              </p>

            </div>
          )
        })}
      </div>
    )
  }

  render() {
    const {username, message} = this.state

    return (
      <div className="container">
        <h1>Hello World - landing page!</h1>
        <form onSubmit={this.handleSubmit}>
          <input
            type="text" name="username"
            placeholder="What's your name?"
            onChange={this.handleChange} value={username}
          />
          <input
            type="text" name="message"
            placeholder="What do you want to say?"
            onChange={this.handleChange} value={message}
          />
          <button>Send!</button>
        </form>
        {this.renderMessageList()}
      </div>
    )
  }
}

export default Index;