import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef } from "react";
import { useEnsuredId } from "../useEnsuredId.js";
import { FormMessageCounter } from "./FormMessageCounter.js";
import { getFormConfig } from "./formConfig.js";
import { formMessage, formMessageText } from "./formMessageStyles.js";
/**
 * The `FormMessage` component is used to create additional helper messages or
 * error messages and generally placed below the related `TextField`. If a
 * `length` (of the `value`) and `maxLength` are provided, a counter will also
 * be displayed to the right of the `children`.
 *
 * This component can also be used to create form-level validation messages by
 * setting the `role` prop to `"alert"`.
 *
 * @see {@link https://react-md.dev/components/form-message | FormMessage Demos}
 */ export const FormMessage = /*#__PURE__*/ forwardRef(function FormMessage(props, ref) {
    const { id: propId, role, className, counterStyle, counterClassName, messageStyle, messageClassName, error = false, disableWrap = false, theme: propTheme, children, length, maxLength, counterProps, messageProps, ...remaining } = props;
    const id = useEnsuredId(propId, "form-message");
    const theme = getFormConfig("theme", propTheme);
    let message = children;
    if (!disableWrap && children) {
        message = /*#__PURE__*/ _jsx("p", {
            id: `${id}-message`,
            ...messageProps,
            style: messageStyle,
            className: formMessageText({
                className: messageClassName
            }),
            children: children
        });
    }
    return /*#__PURE__*/ _jsxs("div", {
        ...remaining,
        id: id,
        ref: ref,
        "aria-live": role !== "alert" ? "polite" : undefined,
        role: role,
        className: formMessage({
            error,
            theme,
            className
        }),
        children: [
            message,
            typeof length === "number" && typeof maxLength === "number" && /*#__PURE__*/ _jsx(FormMessageCounter, {
                id: `${id}-counter`,
                ...counterProps,
                style: counterStyle,
                className: counterClassName,
                children: `${length} / ${maxLength}`
            })
        ]
    });
});

//# sourceMappingURL=FormMessage.js.map