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, useCallback } from 'react';
import { Field as FinalField } from 'react-final-form';
/**
 * Check if a value is considered empty for required validation.
 * Handles: undefined, null, empty string, empty arrays.
 * Note: 0 is considered a valid value (not empty).
 */
function isEmpty(value) {
    if (value === undefined || value === null || value === '')
        return true;
    if (Array.isArray(value) && value.length === 0)
        return true;
    return false;
}
/**
 * Final Form Field wrapper that supports both Material UI and Fluent UI components.
 *
 * UDP Fluent components automatically detect and convert error props,
 * so you can use the same Field component for both MUI and Fluent components.
 *
 * @example
 * // MUI component
 * <Field component={TextField} name="email" required />
 *
 * @example
 * // UDP Fluent component (auto-detects error style)
 * <Field component={UdpTextInput} name="email" required />
 */
export const Field = forwardRef((props, ref) => {
    const { component: Component, afterSubmit, allowNull, beforeSubmit, defaultValue, format, formatOnBlur, initialValue, isEqual, name, parse, 
    // @ts-ignore
    render, // extract the render prop so it doesn't get passed to Field
    subscription, validate, validateFields, value, // radio/checkbox
    helperText, valueForChange, required, ComponentProps, type, onChange: onChangeProp } = props, componentProps = __rest(props, ["component", "afterSubmit", "allowNull", "beforeSubmit", "defaultValue", "format", "formatOnBlur", "initialValue", "isEqual", "name", "parse", "render", "subscription", "validate", "validateFields", "value", "helperText", "valueForChange", "required", "ComponentProps", "type", "onChange"]);
    const fieldProps = {
        afterSubmit,
        allowNull,
        beforeSubmit,
        defaultValue,
        format,
        formatOnBlur,
        initialValue,
        isEqual,
        name,
        parse,
        subscription,
        validate,
        validateFields,
        value,
        type
    };
    const makeValidation = useCallback(
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    (value, allValues, meta) => {
        // Required validation - allows 0 as a valid value
        if (required && typeof value !== 'number' && isEmpty(value)) {
            return 'Required';
        }
        // Chain to custom validation if provided
        if (validate) {
            return validate(value, allValues, meta);
        }
        return undefined;
    }, [required, validate]);
    return (React.createElement(FinalField, Object.assign({}, fieldProps, { validate: makeValidation }), (params) => {
        const { input, meta } = params;
        const { name: fieldName, onChange } = input, inputProps = __rest(input, ["name", "onChange"]);
        // Determine if we should show an error
        const metaError = meta.error;
        const metaSubmitError = meta.submitError;
        const hasError = Boolean(meta.touched &&
            ((metaSubmitError && !meta.dirtySinceLastSubmit) || metaError));
        const errorMessage = metaError !== null && metaError !== void 0 ? metaError : metaSubmitError;
        // Build error props - MUI style
        // UDP Fluent components automatically convert these to Fluent style
        const errorProps = {
            error: hasError,
            helperText: hasError ? errorMessage : helperText
        };
        // Wrap onChange to support valueForChange transform
        const handleChange = (...args) => {
            if (onChangeProp) {
                onChangeProp(...args);
            }
            if (valueForChange) {
                onChange(valueForChange(args[0]));
            }
            else {
                onChange(...args);
            }
        };
        return (React.createElement(Component, Object.assign({ ref: ref, required: required }, componentProps, ComponentProps, errorProps, { onChange: handleChange, name: fieldName }, inputProps)));
    }));
});
Field.displayName = 'Field';
//# sourceMappingURL=Field.js.map