content: /* eslint-disable no-trailing-spaces,flowtype-errors/show-errors,max-len */
  /**
   * Created by sanglnv on 6/30/17.
   */
  // @flow
  import React, { Component } from 'react';
  import PropTypes from 'prop-types';
  import { TextInput, Checkbox, Button } from 'react-desktop';
  import { Field } from 'redux-form';
  import styles from './index.css';
  
  class Login extends Component {
  
    static propTypes = {
      handleSubmit: PropTypes.func.isRequired,
      reset: PropTypes.func.isRequired,
      pristine: PropTypes.bool.isRequired,
      submitting: PropTypes.bool.isRequired,
    };
  
    handleSubmit = (values) => console.log('handleSubmit', values);
  
    renderField = ({ input, styles, label, className, meta: { touched, error }, ...custom }) => (
      <div>
        <TextInput
          label={label}
          className={className || null}
          rounded="5"
          {...input}
          {...styles}
          {...custom}
        />
        {touched && error && <div className="error">{error}</div>}
      </div>
    );
  
    render() {
      const { handleSubmit, reset, pristine, submitting } = this.props;
  
      return (
        <form>
          <div className={styles.container} data-tid="container">
            <div className={styles.inputContainer}>
              <Field
                name="email"
                label="Username or Email"
                component={this.renderField}
                type="email"
              />
              <Field
                name="pasword"
                label="Password"
                component={this.renderField}
                type="password"
                styles={{ marginTop: 10 }}
              />
  
              <div className={styles.rememberMe}>
                <Checkbox
                  color="orange"
                  label="Remember me"
                  onChange={(e) => console.log(e.target.value)}
                />
              </div>
  
              <div className={styles.btnContainer}>
                <Button
                  type="submit"
                  className={styles.btnSubit}
                  color={'rgb(204, 127, 41)'}
                  onClick={handleSubmit(this.handleSubmit)}
                  disabled={pristine || submitting}
                >Submit</Button>
                <Button
                  type="button"
                  color={'rgb(204, 204, 204)'}
                  onClick={reset}
                  disabled={pristine || submitting}
                >Cancel</Button>
              </div>
            </div>
          </div>
        </form>
      );
    }
  }
  
  export default Login;
  