import * as tslib_1 from "tslib";
import React, { useState, useEffect, useCallback } from 'react';
import classnames from 'classnames';
import { CSSTransition } from 'react-transition-group';
import FormStoreContext from './form-store-context';
var defaultProps = {
    prefixCls: 'ty-form-item',
    validateOnChange: true,
    validateOnBlur: false,
};
var FormItem = function (props) {
    var name = props.name, label = props.label, helper = props.helper, notice = props.notice, validateOnChange = props.validateOnChange, validateOnBlur = props.validateOnBlur, prefixCls = props.prefixCls, className = props.className, style = props.style, children = props.children;
    var cls = classnames(prefixCls, className);
    var store = React.useContext(FormStoreContext);
    var _a = useState(name && store ? store.getFieldValue(name) : undefined), value = _a[0], setValue = _a[1];
    var _b = useState(name && store ? store.getFieldError(name) : undefined), error = _b[0], setError = _b[1];
    var _c = useState(false), showError = _c[0], setShowError = _c[1];
    var onChange = useCallback(function (val) {
        store && store.setFieldValue(name, val);
    }, [store]);
    var onBlur = function () {
        validateOnBlur && validateAndUpdateError();
    };
    var onFocus = function () {
        setShowError(false);
    };
    var validateAndUpdateError = useCallback(function () {
        store.validateField(name);
        var err = store.getFieldError(name);
        setError(err);
        setShowError(!!err);
    }, [store]);
    useEffect(function () {
        if (store) {
            store.setFieldValue(name, value);
            return store.subscribe(name, function (isOnChange) {
                setValue(store.getFieldValue(name));
                (!isOnChange || validateOnChange) && validateAndUpdateError();
            });
        }
    }, []);
    return (React.createElement("div", { className: cls, style: style },
        label && (React.isValidElement(label) ? label : React.createElement("label", { className: prefixCls + "__label" }, label)),
        React.createElement("div", { className: prefixCls + "__controls" },
            React.Children.map(children, function (child) {
                if (React.isValidElement(child)) {
                    var childProps = tslib_1.__assign({}, child.props, { value: value,
                        onChange: onChange,
                        onBlur: onBlur,
                        onFocus: onFocus });
                    return React.cloneElement(child, childProps);
                }
            }),
            React.createElement("div", { className: prefixCls + "__addon" },
                notice && React.createElement("div", { className: prefixCls + "__notice" }, notice),
                helper && React.createElement("div", { className: prefixCls + "__helper" }, helper),
                React.createElement(CSSTransition, { timeout: 0, in: showError, classNames: prefixCls + "__error_slide" },
                    React.createElement("div", { className: prefixCls + "__error" }, error))))));
};
FormItem.defaultProps = defaultProps;
export default FormItem;
//# sourceMappingURL=form-item.js.map