import { useMemo } from 'react';

export const useInputWidth = (format: string, fontSize: number, fontWeight: number) =>
  useMemo(() => {
    if (typeof window !== 'undefined' && !CSS.supports('field-sizing', 'content')) {
      // Create a temporary span element to calculate the width of the content
      const input = document.createElement('input');
      input.value = format.trim();

      input.style.boxSizing = 'border-box';
      input.style.width = '0';
      input.style.borderStyle = 'none';
      input.style.fontSize = `${fontSize}px`;
      input.style.fontWeight = `${fontWeight}`;
      input.style.letterSpacing = '0';
      input.style.padding = '0';
      input.style.position = 'fixed';
      input.style.top = '0';
      input.style.left = '0';
      input.style.zIndex = '-9999999';
      input.style.visibility = 'hidden';
      input.style.opacity = '0';

      document.body.appendChild(input);
      const width = input.scrollWidth;
      document.body.removeChild(input);

      return `${width}px`;
    }

    return 'auto';
  }, [format]);
