import React from 'react';
import { Field, reduxForm } from 'redux-form';
import { renderField } from '../../utils/helpers';

function renderConditionsCheckbox({
  input,
  label,
  type,
  meta: { touched, error },
  id,
  disabled,
  requiredSign,
}) {
  const isError = touched && error;
  return (
    <div className={`form-row ${isError ? 'form-row--error' : ''}`}>
      <div className="input__wrapper">
        <input {...input} type={type} id={id} disabled={disabled} />
        <label htmlFor={id} className="form-row__label form-row__label--minor">
          Akceptuję <a href="#" className="link link--underlined link--natural">Regulamin Serwisu Donald.pl</a> i&nbsp;zobowiązuję się do jego przestrzegania
        </label>
        {requiredSign && <span className="input__required-sign">*</span> }
      </div>
      { isError &&
        <span className="error">
          {error}
        </span>
      }
    </div>
  );
}

const validate = (values) => {
  const errors = {};
  if (!values.email) {
    errors.email = 'Pole jest wymagane';
  } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
    errors.email = 'Invalid email address';
  }
  if (!values.password) {
    errors.password = 'Pole jest wymagane';
  }
  if (!values['password-retype']) {
    errors['password-retype'] = 'Pole jest wymagane';
  }
  if (values['password-retype'] !== values.password && values.password && values['password-retype']) {
    errors['password-retype'] = 'Pola nie są takie same';
    errors.password = 'Pola nie są takie same';
  }
  if (!values.username) {
    errors.username = 'Pole jest wymagane';
  }
  if (!values.conditions) {
    errors.conditions = 'Pole jest wymagane';
  }
  return errors;
};

const RegisterForm = (props) => {
  const { handleSubmit, submitting, error } = props;
  return (
    <div>
      <form onSubmit={handleSubmit}>
        <Field name="username" component={renderField} type="text" label="Imię i nazwisko / pseudonim:" id="username" requiredSign />
        <Field name="email" component={renderField} type="text" label="E-mail" id="email" requiredSign />
        <Field name="password" component={renderField} type="password" label="Hasło" id="password" requiredSign />
        <Field name="password-retype" component={renderField} type="password" label="Powtórz hasło" id="password-retype" requiredSign />
        <Field name="conditions" component={renderConditionsCheckbox} type="checkbox" id="conditions" requiredSign />
        {error &&
          <div className="form-row">
            <strong className="form-row__error">{error}</strong>
          </div>
        }
        <div className="form-row">
          <button type="submit" disabled={submitting} className="button button--primary">Załóż konto</button>
        </div>
      </form>
    </div>
  );
};

export default reduxForm({
  validate,
  form: 'register',
})(RegisterForm);