import { __assign, __rest } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
import { useCallback } from 'react';
import cx from 'classnames';
import Checkbox from '../../checkbox';
import { FormField } from '../Field';
import { useEventCallbackRef } from '../../utils/hooks/useEventCallbackRef';
function CheckboxField(_a) {
    var childProps = _a.childProps, props = _a.props;
    var value = childProps.value, passedProps = __rest(childProps, ["value"]);
    var onChangeRef = useEventCallbackRef(childProps.onChange);
    var onChange = useCallback(function (e) {
        var _a;
        (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, e.target.checked);
    }, [onChangeRef]);
    return (_jsx(Checkbox, __assign({}, props.props, passedProps, { checked: value, onChange: onChange }), void 0));
}
export function FormCheckboxField(props) {
    var className = props.className, rest = __rest(props, ["className"]);
    return (_jsx(FormField, __assign({}, rest, { className: cx(className, 'zent-form-checkbox-field'), defaultValue: props.defaultValue ||
            false }, { children: function (childProps) { return _jsx(CheckboxField, { childProps: childProps, props: props }, void 0); } }), void 0));
}
