// This doesn't have everything but it gives an idea of how the interfaces and decorator should be used.

interface LoginFormData {
  username?: string;
  password?: string;
}

interface LoginFormProps extends FormProps<LoginFormData, AppState> {
  dispatch?: Dispatch<AppState>,
}

@reduxForm<typeof LoginForm, LoginFormData, LoginFormProps, AppState>({
  form: 'login',
  onSubmit: LoginForm.handleSubmit,
  validate: LoginForm.validate,
})
export class LoginForm extends React.Component<LoginFormProps, {}> {

  static validate(values: LoginFormData) {
    let errors: FormErrors<LoginFormData> = {};

    if (!values.username) {
      errors.username = 'Required';
    }

    if (!values.password) {
      errors.password = 'Required';
    }

    return errors;
  }

  static handleSubmit(values: LoginFormData, dispatch) {
    return sleep(2000).then(() => {
      throw new SubmissionError<LoginFormData>({_error: 'Submission failed'});
    });
  };

  render() {
    let handleSubmit = this.props.handleSubmit;

    return (
      <form onSubmit={handleSubmit}>
        <Field
          component='input'
          id='username'
          name='username'
          onKeyDown={this.handleTextFieldSubmit}
        />
        <Field
          component='password'
          id='password'
          name='password'
          onKeyDown={this.handleTextFieldSubmit}
        />
        <button
          onClick={handleSubmit}
          disabled={this.props.pristine}
        >Login</button>
      </form>
    );
  }
}