import React from "react";
import Prompt from "../components/Prompt";

class PromptContainer extends React.Component {
  constructor(props, context, updater) {
    super(props, context, updater);
    this.state = {
      username: ""
    };

    // No autobind with ES6 classes without ES7 autobind decorators
    this.handleSubmitUser = this.handleSubmitUser.bind(this);
    this.handleUpdateUser = this.handleUpdateUser.bind(this);
  }

  handleSubmitUser(e) {
    e.preventDefault();
    console.log("oSU", this);
    let username = this.state.username;
    this.setState({
      username: ""
    });
    if (this.props.routeParams.playerOne) {
      // Go to battle
      this.context.router.push({
        pathname: "battle",
        query: {
          playerOne: this.props.routeParams.playerOne,
          playerTwo: this.state.username
        }
      });
      return;
    }
    this.context.router.push(`playerTwo/${this.state.username}`);
  }

  handleUpdateUser(e) {
    console.log("oUU", this);
    this.setState({
      username: e.target.value
    });
  }

  render() {
    return (
      <Prompt
        header={this.props.route.header}
        onSubmitUser={this.handleSubmitUser}
        onUpdateUser={this.handleUpdateUser}
        username={this.state.username}
      />
    );
  }
}

// Initializing via static properties is es7 only.
PromptContainer.contextTypes = {
  router: React.PropTypes.object.isRequired
};
PromptContainer.defaultProps = {};
PromptContainer.propTypes = {};

export default PromptContainer;