import { clsx } from 'clsx';
import { useContext, createContext, useState, useMemo, useRef } from 'react';
import { useResizeObserver } from '../common/hooks/useResizeObserver.mjs';
import { cssValueWithUnit } from '../utilities/cssValueWithUnit.mjs';
import { FieldLabelContextProvider, InputIdContextProvider, InputDescribedByProvider, InputInvalidProvider } from './contexts.mjs';
import { jsx, jsxs } from 'react/jsx-runtime';

const InputPaddingStartContext = /*#__PURE__*/createContext([undefined, () => {}]);
const InputPaddingEndContext = /*#__PURE__*/createContext([undefined, () => {}]);
function useInputPaddings() {
  const [paddingStart] = useContext(InputPaddingStartContext);
  const [paddingEnd] = useContext(InputPaddingEndContext);
  return {
    paddingInlineStart: paddingStart,
    paddingInlineEnd: paddingEnd
  };
}
function inputPaddingInitialState({
  initialContentWidth,
  padding = inputAddonDefaultPadding
} = {}) {
  return () => initialContentWidth != null ? `calc(${cssValueWithUnit(initialContentWidth)} + ${cssValueWithUnit(inputAddonContentWidthAddendByPadding[padding])})` : undefined;
}
function InputGroup({
  addonStart,
  addonEnd,
  disabled,
  className,
  children
}) {
  const [paddingStart, setPaddingStart] = useState(inputPaddingInitialState(addonStart));
  const [paddingEnd, setPaddingEnd] = useState(inputPaddingInitialState(addonEnd));
  return /*#__PURE__*/jsx(InputPaddingStartContext.Provider, {
    value: useMemo(() => [paddingStart, setPaddingStart], [paddingStart]),
    children: /*#__PURE__*/jsx(InputPaddingEndContext.Provider, {
      value: useMemo(() => [paddingEnd, setPaddingEnd], [paddingEnd]),
      children: /*#__PURE__*/jsxs("fieldset", {
        disabled: disabled,
        className: clsx(className, 'np-input-group'),
        children: [addonStart != null ? /*#__PURE__*/jsx(InputAddon, {
          placement: "start",
          ...addonStart
        }) : null, children, addonEnd != null ? /*#__PURE__*/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] = useContext(placement === 'start' ? InputPaddingStartContext : InputPaddingEndContext);
  const ref = useRef(null);
  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));
    }
  });
  const isAvatarView = node => {
    if (!node || typeof node !== 'object') return false;
    const {
      type
    } = node;
    if (!type || typeof type !== 'function' && typeof type !== 'object') return false;
    return type.displayName === 'AvatarView' || type.name === 'AvatarView';
  };
  const hasAvatarView = Array.isArray(content) ? content.some(isAvatarView) : isAvatarView(content);
  return /*#__PURE__*/ /* Prevent nested controls from being labeled redundantly */jsx(FieldLabelContextProvider, {
    value: undefined,
    children: /*#__PURE__*/jsx(InputIdContextProvider, {
      value: undefined,
      children: /*#__PURE__*/jsx(InputDescribedByProvider, {
        value: undefined,
        children: /*#__PURE__*/jsx(InputInvalidProvider, {
          value: undefined,
          children: /*#__PURE__*/jsx("span", {
            ref: ref,
            className: 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'
            }, hasAvatarView && 'np-input-addon--avatar'),
            children: content
          })
        })
      })
    })
  });
}

export { InputGroup, useInputPaddings };
//# sourceMappingURL=InputGroup.mjs.map
