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 = 0
        values.description = "bad_boy"
        postUsersData(values)
    }

    return (   
        <div className="formdiv">
            <div>
            <Authbuttons />
            <form onSubmit={handleSubmit(submit)} className="form">
                <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>
            </form>
            </div>
        </div>

    )
}

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