import React from "react";
import { Field, reduxForm } from 'redux-form';
import {withRouter} from 'react-router';
import {connect} from "react-redux";
import validate from "../../../utils/validation/registrValidate";
import FancyInput from "../../inputs/FansyInput";
import CustomSelectorCitySignUp from "../../inputs/citySelector/CitySelector";
import {sendFormDataSignUp} from "../../../actions/actionCreator";
import style from "./signUpForm.module.sass";
import FancyPhoneInput from "../../inputs/fancyPhoneInput/FansyPhoneInput";
import FancyDatePicker from "../../inputs/fancyDatePicker/fancyDatePicker";

const SignUpForm = (props) => {
    const {registration} = props;

    const submit = (values) => {

        if(!registration.syncErrors) {
            const formData = registration.values;
            delete formData.confirmPassword;

            props.sendDataFormSignUp(formData);
        }
    };

    if(props.token && !props.isFetching) {
        props.history.push("/");
    }

    return(
        <form autoComplete={'off'} className={style.mainContainer}>
            <Field
                name={'name'}
                type={'text'}
                component={FancyInput}
                label={'Введите пожалуйста свое имя*'}
            />
            <Field
                name={'surname'}
                type={'text'}
                component={FancyInput}
                label={'Введите пожалуйста свою фамилию*'}
            />
            <Field
                name={'email'}
                type={'text'}
                component={FancyInput}
                label={'Введите пожалуйста свой адрес электронной почты*'}
            />
            <Field
                name={'birthDay'}
                formName={'registration'}
                type={'date'}
                isValidation={false}
                component={FancyDatePicker}
                label={'Дата рождения'}
            />
            <Field
                name={'phone'}
                type={'text'}
                component={FancyPhoneInput}
                label={'Введите пожалуйста свой номер телефона*'}
            />
            <Field
                name={'city'}
                type={'text'}
                formName={"registration"}
                component={CustomSelectorCitySignUp}
                label={'Выберите пожалуйста свой город*'}
            />
            <Field
                name={'street'}
                type={'text'}
                component={FancyInput}
                label={'Введите пожалуйста улицу*'}
            />
            <Field
                name={'home'}
                type={'text'}
                component={FancyInput}
                label={'Выберите номер дома*'}
            />
            <Field
                name={'apartment'}
                type={'text'}
                component={FancyInput}
                label={'Выберите номер квартиры'}
            />
            <Field
                name={'postIndex'}
                type={'number'}
                component={FancyInput}
                label={'Ввведите почтовый индекс*'}
            />
            <Field
                name={'password'}
                type={'password'}
                component={FancyInput}
                label={'Придумайте пароль*'}
            />
            <Field
                name={'confirmPassword'}
                type={'password'}
                component={FancyInput}
                label={'Введите пароль еще раз*'}
            />
            <div
                className={registration && registration.syncErrors
                    ? style.blockedSubmitButton : style.submitButton}
                onClick={submit}
            >
                {props.isFetching ? <p>Подождите...</p>:<p>Зарегистрироватся!</p>}
            </div>
        </form>
    );
};

const mapStateToProps = state => {
    const {registration} = state.form;
    const {token, isFetching, error} = state.signUpReducers;

    return {
        registration, token, isFetching, error
    }
};

const mapDispatchToProps = dispatch => ({
    sendDataFormSignUp: signUpData => dispatch(sendFormDataSignUp(signUpData))
});



export default reduxForm({
    form: 'registration',
    validate
})(withRouter(connect(mapStateToProps, mapDispatchToProps)(SignUpForm)));