import { map } from 'ramda'

import withForm from 'hoc/withForm'
import { isValidEmail } from 'utilities/validations'

const renderError = error => <div>{error}</div>

const renderButtonText = form => {
  if (form.submitting || form.validating) return '...'
  if (form.confirming) return 'Success!'
  return 'Submit'
}

const RegistrationForm = ({ form }) => (
  <form onSubmit={form.submit}>
    <input
      type="email"
      value={form.fields.email.value}
      onChange={form.setField('email')}
    />
    {map(renderError, form.fields.email.errors)}
    <input
      type="password"
      value={form.fields.password.value}
      onChange={form.setField('password')}
    />
    {map(renderError, form.fields.password.errors)}
    <button>{renderButtonText(form)}</button>
  </form>
)

export default withForm({
  submit: (form, { createUser }) => {
    return createUser({
      email: form.fields.email.value,
      password: form.fields.password.value
    })
  },
  confirmationDuration: 1000,
  fields: {
    email: {
      getErrors: async (email, { getExistingUser, isValidEmail }) => {
        if (!isValidEmail(email)) return ['Please enter a valid email']
        const user = await getExistingUser({ email })
        if (user) return ['A user with that email already exists']
        return []
      }
    },
    password: {
      getErrors: password => {
        if (password.length < 6) {
          return ['Please enter a password at least 6 characters long']
        }
        return []
      }
    }
  }
})(RegistrationForm)