var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import React, { forwardRef, useImperativeHandle, useRef, useEffect } from 'react';
import { Form as FinalForm } from 'react-final-form';
import createDecorator from './final-form-scroll/createDecorator';
import { formRegistry } from 'udp-react-stencil-component-library';
const scrollToError = createDecorator();
const FormBody = ({ params, formRef, id, render, outerRef }) => {
    useImperativeHandle(outerRef, () => (Object.assign({}, params)));
    return (React.createElement("form", { ref: formRef, onSubmit: params.handleSubmit, noValidate: true, id: id }, typeof render === 'function' ? render(params) : render));
};
const FormInner = (_a, ref) => {
    var { render: renderProp, children, id } = _a, props = __rest(_a, ["render", "children", "id"]);
    const render = renderProp || children;
    const formRef = useRef(null);
    // Auto-register with form registry when id is provided
    useEffect(() => {
        if (id && formRef.current) {
            formRegistry.register(id, formRef.current);
            return () => formRegistry.unregister(id);
        }
    }, [id]);
    return (React.createElement(FinalForm, Object.assign({ ref: ref, decorators: [scrollToError] }, props), (params) => (React.createElement(FormBody, { params: params, formRef: formRef, id: id, render: render, outerRef: ref }))));
};
export const Form = forwardRef(FormInner);
//# sourceMappingURL=Form.js.map