import React, { Component } from "react"

import UserList from "./user_list"
import CategoryColumn from "./category_column"
import IdeaSubmissionForm from "./idea_submission_form"

class Room extends Component {
  constructor(props) {
    super(props)
    this.state = { ideas: [] }
    this.handleIdeaSubmission = this.handleIdeaSubmission.bind(this)
    this._setupRoomChannelEventHandlers()
  }

  _setupRoomChannelEventHandlers() {
    this.props.roomChannel.on("new_idea_received", newIdea => {
      this.setState({ ideas: [...this.state.ideas, newIdea] })
    })
  }

  handleIdeaSubmission(idea) {
    this.props.roomChannel.push("new_idea", { body: idea })
  }

  render() {
    return (
      <section className="room">
        <div className="ui three column padded grid category-columns-wrapper">
          <CategoryColumn category="happy" ideas={ this.state.ideas }/>
          <CategoryColumn category="sad" ideas={ [] }/>
          <CategoryColumn category="confused" ideas={ [] }/>
        </div>

        <UserList users={ this.props.users } />
        <IdeaSubmissionForm onIdeaSubmission={ this.handleIdeaSubmission }/>
      </section>
    )
  }
}

Room.propTypes = {
  roomChannel: React.PropTypes.object.isRequired,
  users: React.PropTypes.array.isRequired,
}

export default Room

@@ -754,20 +754,19 @@
 %22ui 
-three column
+equal width
  pad

Use equal width grid to so that, in the future, we can use four column retro formats without changing the code