'use strict';

var clsx = require('clsx');
var React = require('react');
var InlineAlert = require('../inlineAlert/InlineAlert.js');
var contexts = require('../inputs/contexts.js');
var Label = require('../label/Label.js');
var jsxRuntime = require('react/jsx-runtime');
var sentiment = require('../common/propsValues/sentiment.js');

const Field = ({
  id,
  label,
  required = true,
  message: propMessage,
  hint,
  description = hint,
  sentiment: propType = sentiment.Sentiment.NEUTRAL,
  className,
  children,
  ...props
}) => {
  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.FieldLabelIdContextProvider, {
    value: labelId,
    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, {
                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(InlineAlert, {
              type: sentiment$1,
              id: messageId,
              children: message
            })]
          })
        })
      })
    })
  });
};

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