import React from 'react';
import style from './createGoodsForm.module.sass';
import {updateGoods, deleteSingleGoods} from "../../../actions/actionCreator";
import {connect} from 'react-redux';
import validate from "../../../utils/validation/goodsValidate";
import { Field, reduxForm, reset } from 'redux-form';
import FancyInput from "../../inputs/FansyInput";
import FancySelector from '../../inputs/fancySelector/fancySelector';
import FancyTextArea from '../../inputs/fancyTextArea/fancyTextArea';
import {groups, brands, genders, countryFragrance} from "../../../constants/goods";


const CreateGoodsForm = (props) => {
    const {goodsForm} = props;

    const submitHandler = () => {
        const {values, syncErrors} = props.goodsForm;

        if(!syncErrors) {
            props.updateGoods(values)

        }

    };


    return(
        <form>
            <div className={style.goodsData}>
                <h1>
                    {
                        Object.keys(props.initialValues).length > 0 ? 'Обновить товар' : 'Создать товар'
                    }
                </h1>
                <Field
                    name={'goodsName'}
                    type={'text'}
                    component={FancyInput}
                    label={'Название товара'}
                />
                <Field
                    name={'goodsDescription'}
                    type={'text'}
                    component={FancyInput}
                    label={'Дополнительное название товара'}
                />
                <Field
                    name={'goodsFullDescription'}
                    type={'text'}
                    component={FancyTextArea}
                    label={'Полное описание товара'}
                />
                <Field
                    name={'goodsBrandId'}
                    type={'text'}
                    values={brands}
                    isValidation={false}
                    isTranslate={true}
                    component={FancySelector}
                    label={'Бренд товара'}
                />
                <Field
                    name={'goodsGroupId'}
                    type={'text'}
                    values={groups}
                    isValidation={false}
                    isTranslate={true}
                    component={FancySelector}
                    label={'Група товара'}
                />
                <Field
                    name={'goodsGender'}
                    type={'text'}
                    values={genders}
                    isValidation={false}
                    isTranslate={true}
                    component={FancySelector}
                    label={'Пол'}
                />
                <Field
                    name={'goodsMadeIn'}
                    type={'text'}
                    values={countryFragrance}
                    isValidation={false}
                    isTranslate={true}
                    component={FancySelector}
                    label={'Страна изготовитель'}
                />
                <div
                    className={goodsForm && goodsForm.syncErrors
                        ? style.blockedSubmitButton : style.submitButton
                    }
                    onClick={submitHandler}

                >
                    {
                        Object.keys(props.initialValues).length > 0 ? 'Обновить товар' : 'Создать товар'
                    }
                </div>
                {
                    Object.keys(props.initialValues).length > 0 && (

                        <div onClick={() => props.deleteGoods(props.initialValues.id, props.dynamicSearchData)}>
                            Удалить товар
                        </div>
                    )
                }

            </div>
        </form>
    );
};

const mapStateToProps = state => {
    const {goodsForm} = state.form;
    const initialValues = state.createGoodsReducers.goodsData;
    const dynamicSearchData = state.dynamicSearchGoodsReducers.data;


    return {
        goodsForm, initialValues, dynamicSearchData
    }
};

const mapDispatchToProps = dispatch => ({
    updateGoods: goodsData => dispatch(updateGoods(goodsData)),
    deleteGoods: (goodsId, dynamicSearchData) => dispatch(deleteSingleGoods(goodsId, dynamicSearchData))
});


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

