import { type RefObject, useLayoutEffect } from 'react';

/**
 * Grow a textarea with its text up to a height, then let it scroll inside
 * itself. A one-row box showed only the first line of a long question, so a
 * prompt put in the composer could not be read before it was sent.
 *
 * @param {RefObject<HTMLTextAreaElement>} ref - The box.
 * @param {string} value - Its text; the height follows every change.
 * @param {number} maxHeight - Pixels past which the box scrolls.
 * @returns {void}
 */
export const useAutoGrow = (
  ref: RefObject<HTMLTextAreaElement>,
  value: string,
  maxHeight: number
): void => {
  useLayoutEffect(() => {
    const box: HTMLTextAreaElement | null = ref.current;
    if (!box) return;
    box.style.height = 'auto';
    box.style.height = `${Math.min(box.scrollHeight, maxHeight)}px`;
  }, [ref, value, maxHeight]);
};