/* eslint-disable no-restricted-syntax */
/* eslint-disable guard-for-in */
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { Field, reduxForm } from 'redux-form';
import { loginUser } from '../../actions/auth.action';
import { renderField, emailValid, required } from '../../components/Field';
import PasswordField from '../../components/PasswordField';
import ButtonLoader from '../../components/ButtonLoader';

class Masuk extends Component {
  state = {};

  onSubmit = value => {
    const { loginUser } = this.props;
    const formData = new FormData();
    for (const key in value) {
      formData.append(key, value[key]);
    }
    loginUser(formData);
  };

  render() {
    const { handleSubmit, auth } = this.props;
    return (
      <div className="container-fluid login-container">
        <div className="height-top-container" />
        <div className="row">
          <div className="col-12 d-flex flex-column align-items-center">
            <h2>Masuk ke akunmu</h2>
            <h5 className="text-center">
              Ayo masuk ke akunmu untuk melihat produk keuangan lebih lengkap
            </h5>
            <form onSubmit={handleSubmit(this.onSubmit)}>
              <Field
                name="email"
                type="email"
                component={renderField}
                placeholder="Email"
                validate={[required, emailValid]}
              />
              <Field
                name="password"
                type="password"
                component={PasswordField}
                placeholder="Password"
                validate={[required]}
              />

              <div className="d-flex justify-content-center align-items-center mt-3 mb-3">
                <ButtonLoader
                  type="submit"
                  className="button-login-akun"
                  loader={auth.isLoading}
                >
                  Masuk
                </ButtonLoader>
              </div>
            </form>
            <h6 className="link-daftar">
              Belum punya akun?
              <Link to="/akundaftar">
                <b className="daftar text-white ml-2">Daftar disini</b>
              </Link>
            </h6>
            {auth.errorMessage && (
              <div className="col-lg-12 mt-2 text-center">
                <div className="alert alert-danger" role="alert">
                  {auth.errorMessage}
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    );
  }
}

const mapStateToProps = state => ({
  auth: state.auth
});

export default reduxForm({
  form: 'loginForm' // a unique identifier for this form
})(
  connect(
    mapStateToProps,
    { loginUser }
  )(Masuk)
);