import { useCallback, useState, useLayoutEffect, useEffect } from 'react';

const useInputStyle = ({
  value,
  focus,
  inputElement,
  loading
}) => {
  const initialRender = !useTimeout(300);
  const inputWidth = useFirstDefinedValue(inputElement?.current?.clientWidth, [inputElement?.current, value]);
  const getStyle = useCallback(() => {
    const fontSize = getFontSize(value, focus, inputWidth);
    return {
      fontSize,
      height: fontSize,
      // aligns the top of the digit with the currency button
      marginTop: fontSize * -0.19,
      // if the input loads with a pre-filled value, we don't want to animate the font-size immediately
      transition: initialRender ? 'none' : undefined,
      color: loading ? 'var(--color-interactive-secondary)' : undefined
    };
  }, [value, focus, inputWidth, loading, initialRender]);
  const [style, setStyle] = useState(() => getStyle());
  useLayoutEffect(() => {
    // eslint-disable-next-line react-hooks/set-state-in-effect -- Computing style based on layout measurements
    setStyle(getStyle());
  }, [value, focus, loading, inputWidth, getStyle]);
  return style;
};
function getFontSize(inputValue, isFocused, inputWidth) {
  const defaultFontSize = 52;
  const focusFontSize = 90;
  const minimumFontSize = 34;
  let fontSize = isFocused ? focusFontSize : defaultFontSize;
  if (typeof inputWidth === 'undefined') {
    return fontSize;
  }
  const textLength = inputValue.length;
  const maxCharactersWithoutShrinking = Math.floor(inputWidth / 40);
  if (textLength > maxCharactersWithoutShrinking) {
    const adjustedSize = Math.round(inputWidth / textLength * 1.9);
    fontSize = Math.min(fontSize, adjustedSize);
  }
  return Math.max(fontSize, minimumFontSize);
}
const useFirstDefinedValue = (newValue, dependencies) => {
  const [value, setValue] = useState(newValue);
  useLayoutEffect(() => {
    if (typeof newValue !== 'undefined' && typeof value === 'undefined') {
      // eslint-disable-next-line react-hooks/set-state-in-effect -- Lazy initialization from prop
      setValue(newValue);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [...dependencies, value, newValue]);
  return value;
};
const useTimeout = delay => {
  const [ready, setReady] = useState(false);
  useEffect(() => {
    const timeout = setTimeout(() => {
      setReady(true);
    }, delay);
    return () => {
      clearTimeout(timeout);
    };
  }, [delay]);
  return ready;
};

export { useInputStyle };
//# sourceMappingURL=useInputStyle.mjs.map
