import React, { PropTypes } from 'react';
import { get } from 'lodash';
import Base from 'shared/components/base';
import { Form, Input, Button, Container } from 'shared/components/basic';
import { uiSize, colorStates } from 'shared/components/basic/constants';
import './styles.scss';
export default class LoginComponent extends Base {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      password: '',
    };
  }
  render() {
    const { config } = this.context;
    return (
      <Container >
        <div className="login-component">
          <div className="logo" />
          <Form
            ref={(c) => { this.form = c; }}
            className="col-md-5 mx-auto form clearfix"
          >
            <Input
              name="username"
              type="text"
              value={this.state.username}
              placeholder={this.translate('Login.loginInput')}
              onChange={(e) => this._updateValues(e.target.value, 'username')}
              rules={get(config, 'Login.validators.username', {})}
            />
            <Input
              name="password"
              type="password"
              value={this.state.password}
              placeholder={this.translate('Login.passwordInput')}
              onChange={(e) => this._updateValues(e.target.value, 'password')}
              rules={get(config, 'Login.validators.password', {})}
            />
            <Button
              colorState={colorStates.PRIMARY}
              size={uiSize.DEFAULT}
              className="button float-xs-right"
              loading={this.props.isLoading}
              onClick={() => this._onEnterPress()}
            >
              {this.translate('Login.enter')} {this.translate('appName')}
            </Button>
          </Form>
          <div className="need-help mx-auto">
            {this.translate('Login.needHelp')}
          </div>
        </div>
      </Container>
    );
  }
  _updateValues(value, type) {
    this.setState({ [type]: value });
  }
  _isValid() {
    return this.form.validateAll();
  }
  _onEnterPress() {
    if (this._isValid()) {
      this.props.login(this.state.username, this.state.password);
    }
  }
}
LoginComponent.contextTypes = {
  config: PropTypes.object.isRequired,
};