import React from 'react';
import {render} from 'react-dom';

const AuthenticationHOC = (Component) => class extends React.Component {

   constructor(props){
     super(props);

     this.state = {
       currentUser: {},
       isAuthenticating: false,
       isLoading: false
     }

     this.login = this.login.bind(this);
   }

  login (e){
    e.preventDefault();
    const username = e.target.username.value;
    const password = e.target.password.value;
    console.log(username, password);
    this.setState({currentUser: {username, password}});
  }

  render() {
    return <Component {...this.state} login={this.login}/>
  }
}

const AuthenticationCompnent = (props) => {

  return (
    <div>
      <p> {props.currentUser.username} </p>
      <p> {props.currentUser.password} </p>

      <form onSubmit={props.login}>
        <div>
          Username <input name="username"/>
        </div>
        <div>
          Password <input name="password" type="password"/>
        </div>
        <div>
          <button type="submit"> Login </button>
        </div>
      </form>
    </div>);
}

const DecoratedAuthComponent = AuthenticationHOC(AuthenticationCompnent);

render(<DecoratedAuthComponent />, document.querySelector('#app'))