import React from 'react';

/**
 * LoginForm UI component
 * @extends {React.Component}
 * @example <caption>Usage in React component</caption>
 * <ScrollList items={...} />
 */
class LoginFormUI extends React.Component {
  /**
   * Constructor
   * @param {any} props
   */
  constructor(props) {
    super(props);

    /**
     * Name of component
     */
    this.name = 'LoginForm';

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

  /**
   * Click handler
   */
   onClick(e) {
     e.preventDefault();
     const username = React.findDOMNode(this.refs.username).value;
     const password = React.findDOMNode(this.refs.password).value;

     this.props.onLoginClick(username, password);
   }

  /**
   * render
   * @return {React DOM}
   * @see https://facebook.github.io/react/docs/component-specs.html#render
   */
  render() {
    return (
      <form className="LoginForm">
        <p className="LoginForm-item">
          <input type="text" ref="username" placeholder="username" />
        </p>
        <p className="LoginForm-item">
          <input type="password" ref="password" placeholder="password" />
        </p>
        <p className="LoginForm-item">
          <button onClick={this.onClick}>login</button>
        </p>
      </form>
    );
  }
}

/**
 * PropTypes
 */
LoginFormUI.propTypes = {
  // function to submit the inputs
  onLoginClick: React.PropTypes.func,
};

/**
* Export LoginFormUI
*/
export default LoginFormUI;