import React from 'react'
import { Field, reduxForm } from 'redux-form'

const RegistrForm = props => {
  const { handleSubmit, pristine, reset, submitting } = props
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Login</label>
        <div>
          <Field
            name="Login"
            component="input"
            type="text"
            placeholder="Login"
          />
        </div>
      </div>
      <div>
        <label>Name</label>
        <div>
          <Field
            name="Name"
            component="input"
            type="text"
            placeholder="Name"
          />
        </div>
      </div>
      <div>
        <label>Phone</label>
        <div>
          <Field
            name="Phone"
            component="input"
            type="text"
            placeholder="+380XXXXXXXX"
          />
        </div>
      </div>
      <div>
        <label>Email</label>
        <div>
          <Field
            name="email"
            component="input"
            type="email"
            placeholder="email@example.com"
          />
        </div>
      </div>
      <div>
        <button type="submit" disabled={pristine || submitting}>
          Submit
        </button>
        <button type="button" disabled={pristine || submitting} onClick={reset}>
          Clear Values
        </button>
      </div>
      </form>
  )
}

export default reduxForm({
  form: 'registrForm'
})(RegistrForm)