var AppActions = require('../actions/AppActions');
var React = require('react');
var ReactBootstrap = require('react-bootstrap');

var Button = ReactBootstrap.Button;
var Input = ReactBootstrap.Input;
var Panel = ReactBootstrap.Panel;

var Login = React.createClass({
  getInitialState: function() {
    return {
      "user": "",
      "password": ""
    };
  },

  render: function() {
    return (
      <form onSubmit={this.handleFormSubmit}>
        <Panel>
          <h3> Log In </h3>
          <Input
            type='text'
            name='user'
            onChange={this.handleUserChange}
            placeholder='Enter Login' />
          <Input
            name='password'
            type='password'
            onChange={this.handlePasswordChange}
            placeholder='Enter Password' />
          <Button
            bsStyle='primary'
            type='submit'
            > Log In </Button>
        </Panel>
      </form>
    );
  },

  handleUserChange: function(evt) {
    this.state.user = evt.target.value;
  },

  handlePasswordChange: function(evt) {
    this.state.password = evt.target.value;
  },

  handleFormSubmit: function(event) {
    AppActions.logIn(this.state.user, this.state.password);
    event.stopPropagation();
    event.preventDefault();
  }
});

module.exports = Login;