import React from 'react';
import style from './updateProfile.module.sass';
import FancyDatePicker from '../../../inputs/fancyDatePicker/fancyDatePicker';
import { Field, reduxForm} from 'redux-form';
import {connect} from 'react-redux';
import FancyInput from "../../../inputs/FansyInput";
import {updatePersonalData} from "../../../../actions/actionCreator";
import FancyPhoneInput from "../../../inputs/fancyPhoneInput/FansyPhoneInput";
import CustomSelectorCitySignUp from "../../../inputs/citySelector/CitySelector";


const UpdateProfileForm = (props) => {

    const submitHandler = () => {
        props.updatePersonalData(props.updateProfile.values);
    };

    return(
      <form>
          <Field
              name={'name'}
              type={'text'}
              isValidation={false}
              component={FancyInput}
              label={'Ваше имя'}
          />
          <Field
              name={'surname'}
              type={'text'}
              isValidation={false}
              component={FancyInput}
              label={'Фамилия'}
          />
          <Field
              name={'email'}
              type={'text'}
              isValidation={false}
              component={FancyInput}
              label={'E-mail'}
          />
          <Field
              name={'birthDay'}
              formName={'updateProfile'}
              type={'date'}
              isValidation={false}
              component={FancyDatePicker}
              label={'Дата рождения'}
          />
          <Field
              name={'phone'}
              type={'text'}
              component={FancyPhoneInput}
              isValidation={false}
              label={'Номер телефона'}
          />
          <Field
              name={'city'}
              type={'text'}
              isValidation={false}
              formName={'updateProfile'}
              component={CustomSelectorCitySignUp}
              label={'Ваш город'}
          />
          <Field
              name={'street'}
              type={'text'}
              isValidation={false}
              component={FancyInput}
              label={'Улица'}
          />
          <Field
              name={'home'}
              type={'text'}
              isValidation={false}
              component={FancyInput}
              label={'Номер дома'}
          />
          <Field
              name={'apartment'}
              type={'text'}
              isValidation={false}
              component={FancyInput}
              label={'Номер квартиры'}
          />
          <Field
              name={'postIndex'}
              type={'number'}
              isValidation={false}
              component={FancyInput}
              label={'Индекс'}
          />
          <Field
              name={'oldPassword'}
              type={'password'}
              isValidation={false}
              component={FancyInput}
              label={'Старый пароль'}
          />
          <Field
              name={'password'}
              type={'password'}
              isValidation={false}
              component={FancyInput}
              label={'Новый пароль'}
          />
          <Field
              name={'confirmPassword'}
              type={'password'}
              isValidation={false}
              component={FancyInput}
              label={'Подтвердите пароль'}
          />
          <div className={style.buttonConfirm} onClick={submitHandler}>
              Сохранить изменения
          </div>
      </form>
    );
};

const mapStateToProps = state => {
    const {updateProfile} = state.form;
    const {error} = state.userPersonalDataReducer;
    const initialValues = state.userPersonalDataReducer.data;
    // const error = state.userPersonalDataReducer.error;

    return {
        error, initialValues, updateProfile
    }
};

const mapDispatchToProps = dispatch => ({
    updatePersonalData: personalData => dispatch(updatePersonalData(personalData))
});

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(reduxForm({
    form: 'updateProfile', // a unique identifier for this form
    enableReinitialize: true
})(UpdateProfileForm))

