import { clsx } from 'clsx';
import { useRef, useId } from 'react';
import '../common/theme.mjs';
import '../common/direction.mjs';
import '../common/propsValues/control.mjs';
import '../common/propsValues/breakpoint.mjs';
import '../common/propsValues/size.mjs';
import '../common/propsValues/typography.mjs';
import '../common/propsValues/width.mjs';
import '../common/propsValues/type.mjs';
import '../common/propsValues/dateMode.mjs';
import '../common/propsValues/monthFormat.mjs';
import '../common/propsValues/position.mjs';
import '../common/propsValues/layouts.mjs';
import '../common/propsValues/status.mjs';
import { Sentiment } from '../common/propsValues/sentiment.mjs';
import '../common/propsValues/profileType.mjs';
import '../common/propsValues/variant.mjs';
import '../common/propsValues/scroll.mjs';
import '../common/propsValues/markdownNodeType.mjs';
import '../common/fileType.mjs';
import '@transferwise/icons';
import 'react-intl';
import '../common/closeButton/CloseButton.messages.mjs';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { InlinePrompt } from '../prompt/InlinePrompt/InlinePrompt.mjs';
import '../statusIcon/StatusIcon.mjs';
import '../body/Body.mjs';
import '../button/Button.resolver.mjs';
import '../badge/Badge.mjs';
import '@wise/art';
import '@transferwise/neptune-validation';
import '../provider/direction/DirectionProvider.mjs';
import '../sentimentSurface/SentimentSurface.mjs';
import '../primitives/PrimitiveButton/PrimitiveButton.mjs';
import '../primitives/PrimitiveAnchor/PrimitiveAnchor.mjs';
import { FieldLabelContextProvider, InputIdContextProvider, InputDescribedByProvider, InputInvalidProvider } from '../inputs/contexts.mjs';
import { Label as LabelNamespace } from '../label/Label.mjs';

const Field = ({
  id,
  label,
  required = true,
  message: propMessage,
  messageIconLabel,
  messageLoading,
  hint,
  description = hint,
  sentiment: propType = Sentiment.NEUTRAL,
  className,
  children,
  ...props
}) => {
  const labelRef = useRef(null);
  const sentiment = props.error ? Sentiment.NEGATIVE : propType;
  const message = propMessage || props.error;
  const hasError = sentiment === Sentiment.NEGATIVE;
  const labelId = useId();
  const fallbackInputId = useId();
  const inputId = id !== null ? id ?? fallbackInputId : undefined;
  const messageId = useId();
  const descriptionId = useId();
  /**
   * form control can have multiple messages to describe it,
   * e.g the description underneath the label and inline alert
   */
  function ariaDescribedbyByIds() {
    const messageIds = [];
    if (description) {
      messageIds.push(descriptionId);
    }
    if (message) {
      messageIds.push(messageId);
    }
    return messageIds.length > 0 ? messageIds.join(' ') : undefined;
  }
  return /*#__PURE__*/jsx(FieldLabelContextProvider, {
    value: {
      id: labelId,
      ref: labelRef
    },
    children: /*#__PURE__*/jsx(InputIdContextProvider, {
      value: inputId,
      children: /*#__PURE__*/jsx(InputDescribedByProvider, {
        value: ariaDescribedbyByIds(),
        children: /*#__PURE__*/jsx(InputInvalidProvider, {
          value: hasError,
          children: /*#__PURE__*/jsxs("div", {
            className: clsx('np-field form-group d-block', {
              'has-success': sentiment === Sentiment.POSITIVE,
              'has-warning': sentiment === Sentiment.WARNING,
              'has-error': hasError,
              'has-info': sentiment === Sentiment.NEUTRAL
            }, className),
            children: [label != null ? /*#__PURE__*/jsxs(Fragment, {
              children: [/*#__PURE__*/jsx(LabelNamespace, {
                ref: labelRef,
                id: labelId,
                htmlFor: inputId,
                children: required ? label : /*#__PURE__*/jsx(LabelNamespace.Optional, {
                  children: label
                })
              }), /*#__PURE__*/jsx(LabelNamespace.Description, {
                id: descriptionId,
                children: description
              }), /*#__PURE__*/jsx("div", {
                className: "np-field-control",
                children: children
              })]
            }) : children, message && /*#__PURE__*/jsx(InlinePrompt, {
              sentiment: sentiment,
              id: messageId,
              mediaLabel: messageIconLabel,
              className: "np-field__prompt",
              loading: messageLoading,
              width: "full",
              children: message
            })]
          })
        })
      })
    })
  });
};

export { Field };
//# sourceMappingURL=Field.mjs.map
