import React from "react";
import { reduxForm, Field } from "redux-form";
import Authbuttons from './authButtons'
import { authValidate } from "../../utils/authValidate";
import { authRenderField } from "../../common/authRenderField"


const Form = props => {
    const { handleSubmit, getUsersData, pristine } = props
    const submit = (values) => {
        getUsersData(values);
    }
    return (

        <div className="formdiv">
            <Authbuttons />
            <form className="form" onSubmit={handleSubmit(submit)}>
                <div>
                    <Field
                        name="email"
                        component={authRenderField}
                        type="Емейл"
                        placeholder="email@example.com"
                        className="input"
                    />
                </div>
                <div>
                    <Field
                        name="password"
                        component={authRenderField}
                        type="password"
                        placeholder="Пароль"
                        className="input"
                    />
                </div>
                <button className="auth__submit-button">Войти</button>
            </form>
        </div>


    );
}

export default reduxForm({ form: "authForm", validate: authValidate })(Form);
// <button type="submit" className="button" disabled={pristine}>Отправить</button>