import React from 'react';
import { connect } from 'react-redux';
import { Form, Button, Input } from '@my/react-ui-elements';
import { authenticateUser } from '../../actions/index';
import { translate } from 'react-i18next';
import { I18nextProvider } from 'react-i18next';
import i18n from '../../i18n';

const styles = {
  wrapper: {
    padding: '30px 20px',
    background: '#fff',
    borderRadius: '3px',
    border: '1px solid #e5e5e5'
  },
  subTitle: {
    opacity: 0.3
  }
};

@connect(store => {
  return {
    config: store.config.components.Authentication,
    loading: store.authentication.loginform_loading,
    errorMessage: store.authentication.loginform_errorMessage,
    forgotpasswordEnabled: store.config.components.Authentication.forgotpassword_enabled
  };
})

@translate(['common'], { wait: false })

class LoginForm extends React.Component {

  constructor() {
    super();
    this.state = {
      username: null,
      password: null
    };
    this.handleForm = this.handleForm.bind(this);
  }

  handleForm(e) {
    e.preventDefault();
    this.props.dispatch(authenticateUser(this.state.username, this.state.password));
  }

  render() {
    const { t } = this.props;

    // Forgot password
    var forgotPassword = null;
    if(this.props.forgotpasswordEnabled) {
      forgotPassword = <Form.Field>
        <Button as='a' href={this.props.config.forgotpassword_path} secondary fluid>Forgot password</Button>
      </Form.Field>;
    }
    // Full element
    return (
      <I18nextProvider i18n={ i18n }>
        <Form style={styles.wrapper} onSubmit={this.handleForm}>
          <h3>{t('Login')}</h3>
          <p>{this.props.errorMessage}</p>
          <Form.Field>
            <Input onChange={e => this.setState({username: e.target.value})} label='Username'/>
          </Form.Field>
          <Form.Field>
            <Input onChange={e => this.setState({password: e.target.value})} type='password' label='Password'/>
          </Form.Field>
          <Form.Field>
            <Button loading={this.props.loading} disabled={this.props.loading} type='submit' primary fluid>Login</Button>
          </Form.Field>
          {forgotPassword}
        </Form>
      </I18nextProvider>
    );
  }
}

export default LoginForm;