import React, { Component } from 'react';
import ActiveButton from './activeButton';

export default class NicknameInput extends Component {
  constructor(props){
    super(props);

    this.state = {fieldValue: ''};

    this.onInputChange = this.onInputChange.bind(this);
    this.sendNickname = this.sendNickname.bind(this);
  }

  onInputChange(event) {
    this.setState({ fieldValue: event.target.value });
  }

  sendNickname(event){
      event.preventDefault();

      this.props.socket.emit('register', this.state.fieldValue);
      console.log("Sent Registration.")
      this.setState({fieldValue: ''})
  }

  render() {
     return(
       <div className="container-fluid game">
         <div className="row">

           <div className="col-xs-12 col-sm-7">

             <a className="logo">
               <div>WHAT</div>
               <div>THE </div>
               <div>TREND?!</div>
             </a>

             <div className="game__main">
         <form onSubmit={this.sendNickname}>
          <input className="login__input" maxLength="30" placeholder="Nickname" onChange = {this.onInputChange} value={this.state.fieldValue} />
          <span>
            <ActiveButton input = {this.state.fieldValue} type='register' />
          </span>
         </form>
       </div>
     </div>

     <div className="col-xs-12 col-sm-5 game__sidebar">

       <canvas className="scene scene--full" id="scene" ></canvas>

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