import React, { Component } from 'react';

import { connect } from 'react-redux';

import { bindActionCreators } from 'redux';

import { Grid, Row, Col, Panel, FormGroup, ControlLabel, FormControl, Button, Alert } from 'react-bootstrap';

import '../App.css';

import Navbar from './Navbar';

import * as authActions from '../actions/authActions';

class Login extends Component {

  login = () => {

    const username = this.username.value;

    const password = this.password.value;

    this.props.authActions.loginSubmit(username, password);

  }

  renderError() {

    return (

      <Alert bsStyle="danger">Bad credentials</Alert>

    )

  }

  render() {

    return (

      <div>

        <Navbar history={this.props.history} />

        <Grid fluid>

          <Row>

            <Col md={6} mdOffset={3}>

                <form>

                  <FormGroup>

                    <ControlLabel>Username</ControlLabel>

                    <FormControl componentClass="input" type="text" inputRef={ref => { this.username = ref; }} />

                  </FormGroup>

                  <FormGroup>

                    <ControlLabel>Password</ControlLabel>

                    <FormControl componentClass="input" type="password" inputRef={ref => { this.password = ref; }} />

                  </FormGroup>

                  { this.props.login.error && this.renderError() }

                  <Button block bsStyle="primary" onClick={this.login}>Login</Button>

                </form>

              </Panel>

            </Col>

          </Row>

        </Grid>

      </div>

    );

  }

}

function mapStateToProps(state, props) {

  return {

    currentUser: state['currentUser'],

    login: state['login']

  };

}

function mapDispatchToProps(dispatch) {

  return {

    authActions: bindActionCreators(authActions, dispatch)

  }

}

export default connect(mapStateToProps, mapDispatchToProps)(Login);