import React from "react";
import PropTypes from "prop-types";

export class NameControl extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      cur_input: ""
    };
  }

  render() {
    if (this.props.name === "") {
      return (
        <div>
          <input
            type="text"
            value={this.state.cur_input}
            onChange={e => this.setState({ cur_input: e.target.value })}
          />
          <button onClick={() => this.props.updateName(this.state.cur_input)}>
            Set Name
          </button>
        </div>
      );
    } else {
      return <div>Hello, {this.props.name}</div>;
    }
  }
}
NameControl.propTypes = {
  name: PropTypes.string,
  updateName: PropTypes.func
};