import React from 'react';
// eslint-disable-next-line you-dont-need-lodash-underscore/get
import get from 'lodash-es/get';
import { Message } from '../message';
import { useDefaultValidationValues } from './constants';
import { getValidityMessages, buildValidityMessageId } from './utilities';
import { jsx as _jsx } from "react/jsx-runtime";
export default function ValidityMessages({
  fieldId,
  validity,
  validationTestId,
  validationValues: validationValuesParams
}) {
  const defaultValidationValues = useDefaultValidationValues();
  const validationValues = validationValuesParams ?? defaultValidationValues;
  const validityType = get(validity, 'type');
  const validatedValidityMessages = getValidityMessages({
    validity,
    validationValues
  });
  if (!validatedValidityMessages.length) {
    return null;
  }
  return /*#__PURE__*/_jsx("div", {
    className: "dr-validity-messages",
    "test-id": "dr-validity-messages",
    children: validatedValidityMessages.map((message, i) => {
      const extraProps = fieldId ? {
        id: buildValidityMessageId({
          fieldId,
          type: validityType,
          position: i + 1
        })
      } : {};
      return /*#__PURE__*/_jsx(Message, {
        className: "validation-message",
        type: validityType,
        testId: validationTestId,
        ...extraProps,
        children: message
      }, `key-${validityType}-${message}`);
    })
  });
}