import React from 'react'
import { Field, reduxForm } from 'redux-form'
import Authbuttons from './authButtons'
import {regValidate} from '../../utils/regValidate'
import {regRenderField} from '../../common/regRenderField'



const RegistrForm = props => {

  const { handleSubmit, pristine, reset, postUsersData } = props
  const submit = (values) =>{
    values.avatar = "https://site.com"
    values.isAdmin = 1
    values.description = "gfdfgdgdf"
    postUsersData(values)
  
}
  return (
    <div>
     
      <form onSubmit={handleSubmit(submit)} className="form">
      <div>
      <Authbuttons />
        <div> 
          <div>
            <Field
              name="login"
              component={regRenderField}
              type="text"
              placeholder="Логин"
              className="input"
            />
          </div>

          <div>
            <Field
              name="password"
              component={regRenderField}
              type="password"
              placeholder="Пароль"
              className="input"
              />
          </div>

          <div>
            <Field
              name="name"
              component={regRenderField}
              type="text"
              placeholder="Имя"
              className="input"
            />
          </div>
          <div>
            <Field
              name="phone"
              component={regRenderField}
              type="text"
              placeholder="+380XXXXXXXX"
              className="input"
            />
          </div>
          <div>
            <Field
              name="email"
              component={regRenderField}
              type="email"
              placeholder="email@example.com"
              className="input"
            />
          </div>
        </div>
        <div>
          <button type="submit" disabled={pristine} className="button">
            Отправить
          </button>
          <button type="button" disabled={pristine} onClick={reset} className="button">
            Очистить поля
          </button>
        </div>
        </div>
        </form>
      </div>

  )
}

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