'use strict';

var clsx = require('clsx');
var React = require('react');
var useResizeObserver = require('../common/hooks/useResizeObserver.js');
var cssValueWithUnit = require('../utilities/cssValueWithUnit.js');
var contexts = require('./contexts.js');
var jsxRuntime = require('react/jsx-runtime');

const InputPaddingStartContext = /*#__PURE__*/React.createContext([undefined, () => {}]);
const InputPaddingEndContext = /*#__PURE__*/React.createContext([undefined, () => {}]);
function useInputPaddings() {
  const [paddingStart] = React.useContext(InputPaddingStartContext);
  const [paddingEnd] = React.useContext(InputPaddingEndContext);
  return {
    paddingInlineStart: paddingStart,
    paddingInlineEnd: paddingEnd
  };
}
function inputPaddingInitialState({
  initialContentWidth,
  padding = inputAddonDefaultPadding
} = {}) {
  return () => initialContentWidth != null ? `calc(${cssValueWithUnit.cssValueWithUnit(initialContentWidth)} + ${cssValueWithUnit.cssValueWithUnit(inputAddonContentWidthAddendByPadding[padding])})` : undefined;
}
function InputGroup({
  addonStart,
  addonEnd,
  disabled,
  className,
  children
}) {
  const [paddingStart, setPaddingStart] = React.useState(inputPaddingInitialState(addonStart));
  const [paddingEnd, setPaddingEnd] = React.useState(inputPaddingInitialState(addonEnd));
  return /*#__PURE__*/jsxRuntime.jsx(InputPaddingStartContext.Provider, {
    value: React.useMemo(() => [paddingStart, setPaddingStart], [paddingStart]),
    children: /*#__PURE__*/jsxRuntime.jsx(InputPaddingEndContext.Provider, {
      value: React.useMemo(() => [paddingEnd, setPaddingEnd], [paddingEnd]),
      children: /*#__PURE__*/jsxRuntime.jsxs("fieldset", {
        disabled: disabled,
        className: clsx.clsx(className, 'np-input-group'),
        children: [addonStart != null ? /*#__PURE__*/jsxRuntime.jsx(InputAddon, {
          placement: "start",
          ...addonStart
        }) : null, children, addonEnd != null ? /*#__PURE__*/jsxRuntime.jsx(InputAddon, {
          placement: "end",
          ...addonEnd
        }) : null]
      })
    })
  });
}
const inputAddonContentWidthAddendByPadding = {
  none: 0,
  sm: '1rem',
  md: '1.5rem'
};
const inputAddonDefaultPadding = 'md';
function InputAddon({
  placement,
  content,
  interactive,
  padding = inputAddonDefaultPadding
}) {
  const [, setInputPadding] = React.useContext(placement === 'start' ? InputPaddingStartContext : InputPaddingEndContext);
  const ref = React.useRef(null);
  useResizeObserver.useResizeObserver(ref, entry => {
    // TODO: Remove fallback once most browsers support `borderBoxSize`
    const inlineSize = entry.borderBoxSize?.[0]?.inlineSize;
    if (inlineSize != null) {
      setInputPadding(inlineSize);
    } else {
      const targetStyle = getComputedStyle(entry.target);
      setInputPadding(entry.contentRect.width + Number.parseFloat(targetStyle.paddingInlineStart) + Number.parseFloat(targetStyle.paddingInlineEnd));
    }
  });
  return /*#__PURE__*/ /* Prevent nested controls from being labeled redundantly */jsxRuntime.jsx(contexts.FieldLabelContextProvider, {
    value: undefined,
    children: /*#__PURE__*/jsxRuntime.jsx(contexts.InputIdContextProvider, {
      value: undefined,
      children: /*#__PURE__*/jsxRuntime.jsx(contexts.InputDescribedByProvider, {
        value: undefined,
        children: /*#__PURE__*/jsxRuntime.jsx(contexts.InputInvalidProvider, {
          value: undefined,
          children: /*#__PURE__*/jsxRuntime.jsx("span", {
            ref: ref,
            className: clsx.clsx('np-input-addon', {
              'np-input-addon--placement-start': placement === 'start',
              'np-input-addon--placement-end': placement === 'end'
            }, interactive && 'np-input-addon--interactive', {
              'np-input-addon--padding-sm': padding === 'sm',
              'np-input-addon--padding-md': padding === 'md'
            }),
            children: content
          })
        })
      })
    })
  });
}

exports.InputGroup = InputGroup;
exports.useInputPaddings = useInputPaddings;
//# sourceMappingURL=InputGroup.js.map
