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

const ToIssueOrderUnregisterUserForm = (props) => {
    const {orderGoodsData, contactDataForOrderForm} = props;


    const submitHandler = () => {
        props.toIssueOrder({
            "userData": contactDataForOrderForm.values,
            "orderGoodsData": orderGoodsData
        });
        props.updateBasketData([]);
    };

    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={'phone'}
                type={'text'}
                component={FancyPhoneInput}
                isValidation={false}
                label={'Номер телефона'}
            />
            <Field
                name={'city'}
                type={'text'}
                formName={"contactDataForOrderForm"}
                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={'Выберите номер квартиры'}
            />
            <div className={style.buttonConfirm} onClick={submitHandler}>
                Оформить заказ
            </div>
        </form>
    );
};

const mapStateToProps = state => {
    const {contactDataForOrderForm} = state.form;
    const {responseStatus} = state.orderReducers;

    return {
        contactDataForOrderForm, responseStatus
    }
};

const mapDispatchToProps = dispatch => ({
    toIssueOrder: orderData => dispatch(toIssueOrder(orderData)),
    updateBasketData: basketData => dispatch(goodsBasketDataUpdate(basketData))
});

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(reduxForm({
    form: 'contactDataForOrderForm'
})(ToIssueOrderUnregisterUserForm))

