import React, { useState, useEffect, useContext, useCallback } from 'react';
import classNames from 'classnames';
import { FormInstanceContext } from './form-instance-context';
import { FormOptionsContext } from './form-options-context';
import { ConfigContext } from '../config-provider/config-context';
import { getPrefixCls } from '../_utils/general';
import { getPropName, getValueFromEvent } from './form-helper';
import Row from '../grid/row';
import Col from '../grid/col';
import Transition from '../transition';
var FormItem = function (props) {
    var _a, _b, _c;
    var _d = props.colon, colon = _d === void 0 ? true : _d, _e = props.valueGetter, valueGetter = _e === void 0 ? getValueFromEvent : _e, _f = props.valuePropName, valuePropName = _f === void 0 ? 'value' : _f, name = props.name, label = props.label, helper = props.helper, notice = props.notice, rules = props.rules, className = props.className, style = props.style, children = props.children, itemLabelCol = props.labelCol, itemWrapperCol = props.wrapperCol, customisedCls = props.prefixCls;
    var configContext = useContext(ConfigContext);
    var prefixCls = getPrefixCls('form-item', configContext.prefixCls, customisedCls);
    var form = React.useContext(FormInstanceContext);
    var _g = React.useContext(FormOptionsContext), wrapperCol = _g.wrapperCol, labelCol = _g.labelCol, validateTrigger = _g.validateTrigger, layout = _g.layout;
    var _h = useState(name ? form.getFieldValue(name) : undefined), value = _h[0], setValue = _h[1];
    var _j = useState(name ? form.getFieldError(name) : undefined), error = _j[0], setError = _j[1];
    var _k = useState(false), hasErrLabel = _k[0], setHasErrLabel = _k[1];
    var cls = classNames(prefixCls, className, (_a = {},
        _a[prefixCls + "_has-error"] = !!error,
        _a[prefixCls + "_with-err-label"] = hasErrLabel,
        _a));
    var isRequired = 'required' in props ? props.required : (rules && rules.some(function (rule) { return rule.required; })) || false;
    var onChange = useCallback(function () {
        var args = [];
        for (var _i = 0; _i < arguments.length; _i++) {
            args[_i] = arguments[_i];
        }
        if (name) {
            form.setFieldValue(name, valueGetter.apply(void 0, args));
            validateTrigger === 'onChange' && form.validateField(name);
        }
    }, [name, form, valueGetter, validateTrigger]);
    var onBlur = useCallback(function () {
        name && validateTrigger === 'onBlur' && form.validateField(name);
    }, [name, form, validateTrigger]);
    var child = children;
    var prop = getPropName(valuePropName, child && child.type);
    var childProps = (_b = {}, _b[prop] = value, _b.onChange = onChange, _b.onBlur = onBlur, _b);
    child = React.cloneElement(child, childProps);
    var labelCls = classNames((_c = {},
        _c[prefixCls + "__label_required"] = label && isRequired,
        _c[prefixCls + "__label_colon"] = label && colon,
        _c));
    var getSpanAndOffset = function (col) {
        if (typeof col === 'number') {
            return [col, 0];
        }
        else {
            return [col.span, col.offset];
        }
    };
    var getCol = function (col, isSelf) {
        if (isSelf) {
            return getSpanAndOffset(col);
        }
        if (layout === 'vertical') {
            return [24, 0];
        }
        else {
            return getSpanAndOffset(col);
        }
    };
    var _l = itemLabelCol ? getCol(itemLabelCol, true) : getCol(labelCol), labelSpan = _l[0], labelOffset = _l[1];
    var _m = itemWrapperCol
        ? getCol(itemWrapperCol, true)
        : getCol(wrapperCol), wrapperSpan = _m[0], wrapperOffset = _m[1];
    useEffect(function () {
        if (!name) {
            return;
        }
        rules && form.setFiledRules(name, rules);
        return form.subscribe(function (n) {
            if (name === '*' || n === name || n === '*') {
                setValue(form.getFieldValue(name));
                setError(form.getFieldError(name));
            }
        });
    }, [form, name, rules]);
    useEffect(function () {
        if (error) {
            setHasErrLabel(true);
        }
    }, [error]);
    return (React.createElement(Row, { className: cls, style: style },
        React.createElement(Col, { span: labelSpan, offset: labelOffset, className: prefixCls + "__label" },
            React.createElement("label", { htmlFor: name, title: typeof label === 'string' ? label : undefined, className: labelCls }, label)),
        React.createElement(Col, { span: wrapperSpan, offset: wrapperOffset, className: prefixCls + "__controls" },
            React.createElement("div", { className: prefixCls + "__input" },
                React.createElement("div", { className: prefixCls + "__input-content" }, child)),
            notice && React.createElement("div", { className: prefixCls + "__notice" }, notice),
            helper && React.createElement("div", { className: prefixCls + "__helper" }, helper),
            React.createElement(Transition, { in: !!error, animation: "slide-down", onExited: function () { return setHasErrLabel(false); } },
                React.createElement("div", { className: prefixCls + "__error" }, error)))));
};
FormItem.displayName = 'FormItem';
export default FormItem;
//# sourceMappingURL=form-item.js.map