'use strict';

var clsx = require('clsx');
var React = require('react');
require('../common/theme.js');
require('../common/direction.js');
require('../common/propsValues/control.js');
require('../common/propsValues/breakpoint.js');
require('../common/propsValues/size.js');
require('../common/propsValues/typography.js');
require('../common/propsValues/width.js');
require('../common/propsValues/type.js');
require('../common/propsValues/dateMode.js');
require('../common/propsValues/monthFormat.js');
require('../common/propsValues/position.js');
require('../common/propsValues/layouts.js');
require('../common/propsValues/status.js');
var sentiment = require('../common/propsValues/sentiment.js');
require('../common/propsValues/profileType.js');
require('../common/propsValues/variant.js');
require('../common/propsValues/scroll.js');
require('../common/propsValues/markdownNodeType.js');
require('../common/fileType.js');
require('@transferwise/icons');
require('react-intl');
require('../common/closeButton/CloseButton.messages.js');
var jsxRuntime = require('react/jsx-runtime');
var InlinePrompt = require('../prompt/InlinePrompt/InlinePrompt.js');
require('../statusIcon/StatusIcon.js');
require('../body/Body.js');
require('../button/Button.resolver.js');
require('../badge/Badge.js');
require('@wise/art');
require('@transferwise/neptune-validation');
require('../provider/direction/DirectionProvider.js');
require('../sentimentSurface/SentimentSurface.js');
require('../primitives/PrimitiveButton/PrimitiveButton.js');
require('../primitives/PrimitiveAnchor/PrimitiveAnchor.js');
var contexts = require('../inputs/contexts.js');
var Label = require('../label/Label.js');

const Field = ({
  id,
  label,
  required = true,
  message: propMessage,
  messageIconLabel,
  messageLoading,
  hint,
  description = hint,
  sentiment: propType = sentiment.Sentiment.NEUTRAL,
  className,
  children,
  ...props
}) => {
  const labelRef = React.useRef(null);
  const sentiment$1 = props.error ? sentiment.Sentiment.NEGATIVE : propType;
  const message = propMessage || props.error;
  const hasError = sentiment$1 === sentiment.Sentiment.NEGATIVE;
  const labelId = React.useId();
  const fallbackInputId = React.useId();
  const inputId = id !== null ? id ?? fallbackInputId : undefined;
  const messageId = React.useId();
  const descriptionId = React.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__*/jsxRuntime.jsx(contexts.FieldLabelContextProvider, {
    value: {
      id: labelId,
      ref: labelRef
    },
    children: /*#__PURE__*/jsxRuntime.jsx(contexts.InputIdContextProvider, {
      value: inputId,
      children: /*#__PURE__*/jsxRuntime.jsx(contexts.InputDescribedByProvider, {
        value: ariaDescribedbyByIds(),
        children: /*#__PURE__*/jsxRuntime.jsx(contexts.InputInvalidProvider, {
          value: hasError,
          children: /*#__PURE__*/jsxRuntime.jsxs("div", {
            className: clsx.clsx('np-field form-group d-block', {
              'has-success': sentiment$1 === sentiment.Sentiment.POSITIVE,
              'has-warning': sentiment$1 === sentiment.Sentiment.WARNING,
              'has-error': hasError,
              'has-info': sentiment$1 === sentiment.Sentiment.NEUTRAL
            }, className),
            children: [label != null ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
              children: [/*#__PURE__*/jsxRuntime.jsx(Label.Label, {
                ref: labelRef,
                id: labelId,
                htmlFor: inputId,
                children: required ? label : /*#__PURE__*/jsxRuntime.jsx(Label.Label.Optional, {
                  children: label
                })
              }), /*#__PURE__*/jsxRuntime.jsx(Label.Label.Description, {
                id: descriptionId,
                children: description
              }), /*#__PURE__*/jsxRuntime.jsx("div", {
                className: "np-field-control",
                children: children
              })]
            }) : children, message && /*#__PURE__*/jsxRuntime.jsx(InlinePrompt.InlinePrompt, {
              sentiment: sentiment$1,
              id: messageId,
              mediaLabel: messageIconLabel,
              className: "np-field__prompt",
              loading: messageLoading,
              width: "full",
              children: message
            })]
          })
        })
      })
    })
  });
};

exports.Field = Field;
//# sourceMappingURL=Field.js.map
