import { jsx } from "react/jsx-runtime";
import * as React from "react";
import { concat } from "../../utils/classNames.js";
import { useArmstrongConfig } from "../config/config.context.js";
import "./validationErrors.theme.css.js";
const ValidationErrors = React.forwardRef(({ validationErrors, className, scrollIntoView, validationMode, ...nativeProps }, ref) => {
  const globals = useArmstrongConfig({
    validationMode,
    scrollValidationErrorsIntoView: scrollIntoView
  });
  const internalRef = React.useRef(null);
  React.useImperativeHandle(ref, () => internalRef.current, [internalRef]);
  React.useEffect(() => {
    var _a;
    if (validationErrors.length > 0 && globals.scrollValidationErrorsIntoView) {
      (_a = internalRef.current) == null ? void 0 : _a.scrollIntoView({
        block: "center",
        behavior: "smooth"
      });
    }
  }, [validationErrors.length, globals.scrollValidationErrorsIntoView]);
  const getKey = React.useCallback((error, index) => {
    if (typeof error === "string") {
      return error + index;
    }
    return (error == null ? void 0 : error.key) ?? index;
  }, []);
  const shouldShowErrorMessage = globals.validationMode === "both" || globals.validationMode === "message";
  return jsx("div", { ref: internalRef, className: concat("arm-validation-errors", className), ...nativeProps, children: validationErrors.map((error, i) => jsx("div", { className: "arm-validation-error-message", "aria-errormessage": typeof error === "string" ? error : "", children: shouldShowErrorMessage && jsx("span", { children: error }) }, getKey(error, i))) });
});
ValidationErrors.displayName = "ValidationErrors";
export {
  ValidationErrors
};
//# sourceMappingURL=validationErrors.component.js.map
