import React, { Component } from 'react'
import PropTypes from 'prop-types'

import onClickOutsideAddon from 'react-onclickoutside'

class LoginForm extends Component {
  static propTypes = {
    loginFormAuthToken: PropTypes.string,
    closeBox: PropTypes.func
  }

  constructor(props) {
    super(props)
    this.state = { token: '' }
  }

  componentDidMount() {
    const token = document.head.getElementsByTagName('meta')['csrf-token'].content
    this.setState({token})
  }

  emailInputDidMount(node) {
    node && node.focus()
  }

  handleClickOutside = () => {
    this.props.closeBox()
  }

  render () {
    return <form className="loginAnywhere" id="new_user" action="/login" acceptCharset="UTF-8" method="post">
      <input name="utf8" type="hidden" value="✓" />
      <input type="hidden" name="authenticity_token" value={this.state.token} />
      <div className="accountImage"></div>
      <div className="accountInput accountEmail">
        <input placeholder="Email" type="email" name="user[email]" id="user_email" ref={this.emailInputDidMount}/>
      </div>
      <div className="accountInput accountPassword">
        <input placeholder="Password" type="password" name="user[password]" id="user_password" />
      </div>
      <div className="accountSubmit">
        <input type="submit" name="commit" value="SIGN IN" />
      </div>
      <div className="accountRememberMe">
        <label htmlFor="user_remember_me">Stay signed in</label>
        <input name="user[remember_me]" type="hidden" value="0" />
        <input type="checkbox" value="1" name="user[remember_me]" id="user_remember_me" />
        <div className="clearfloat"></div>
      </div>
      <div className="clearfloat"></div>
      <div className="accountForgotPass">
          <a href="/users/password/new">Forgot password?</a>
      </div>
    </form>
  }
}

export default onClickOutsideAddon(LoginForm)