import LabelMask from './LabelMask';
import Mask from './Mask';
import TextInput from './TextInput';
import classNames from 'classnames';
import cleanFieldProps from '../utilities/cleanFieldProps';
import describeField from '../utilities/describeField';
import useId from '../utilities/useId';
import { Label } from '../Label';
import { useLabelProps } from '../Label/useLabelProps';
import { useHint } from '../Hint/useHint';
import { useInlineError } from '../InlineError/useInlineError';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * For information about how and when to use this component,
 * [refer to its full documentation page](https://design.cms.gov/components/text-field/).
 */
export const TextField = props => {
  const {
    id: originalId,
    mask,
    labelMask,
    className,
    ...remainingProps
  } = props;
  const id = useId('text-field--', originalId);
  if (process.env.NODE_ENV !== 'production') {
    if (props.type === 'number') {
      console.warn(`Please use the 'numeric' prop instead of 'type="number"' unless your user research suggests otherwise.`);
    }
    if (mask && labelMask) {
      console.warn("The 'mask' and 'labelMask' fields are mutually exclusive. Please use either one or the other.");
    }
  }
  const {
    errorId,
    topError,
    bottomError,
    invalid
  } = useInlineError({
    ...props,
    id
  });
  const {
    hintId,
    hintElement
  } = useHint({
    ...props,
    id
  });
  const labelProps = useLabelProps({
    ...props,
    id
  });
  let input = /*#__PURE__*/_jsx(TextInput
  // TypeScript doesn't know we set this in .defaultProps
  , {
    type: TextField.defaultProps.type,
    ...cleanFieldProps(remainingProps),
    id: id,
    "aria-invalid": invalid,
    "aria-describedby": describeField({
      ...props,
      errorId,
      hintId
    })
  });

  // See if we need to wrap the input based on some props
  if (mask) {
    input = /*#__PURE__*/_jsx(Mask, {
      mask: mask,
      children: input
    });
  } else if (labelMask) {
    input = /*#__PURE__*/_jsx(LabelMask, {
      labelMask: labelMask,
      children: input
    });
  }
  return /*#__PURE__*/_jsxs("div", {
    className: classNames('ds-u-clearfix',
    // fixes issue where the label's margin is collapsed
    className),
    children: [/*#__PURE__*/_jsx(Label, {
      ...labelProps,
      fieldId: id
    }), hintElement, topError, input, bottomError]
  });
};
TextField.defaultProps = {
  type: 'text'
};
export default TextField;