"use client";
import { useCallback, useEffect, useRef, useState } from "react";
import { useResizeObserver } from "../useResizeObserver.js";
// this is the default of 1.5rem line-height in the styles
const DEFAULT_LINE_HEIGHT = "24";
const noop = ()=>{
// do nothing
};
/** @internal */ export function useResizingTextArea(options) {
    const { maxRows, resize, onChange = noop, containerRef } = options;
    const maskRef = useRef(null);
    const [height, setHeight] = useState();
    const [scrollable, setScrollable] = useState(false);
    useEffect(()=>{
        if (resize !== "auto") {
            setHeight(undefined);
        }
    }, [
        resize
    ]);
    const updateHeight = useCallback(()=>{
        const mask = maskRef.current;
        const container = containerRef.current;
        if (!mask || !container) {
            return;
        }
        const containerStyles = window.getComputedStyle(container);
        const borderHeight = parseFloat(containerStyles.borderTopWidth) + parseFloat(containerStyles.borderBottomWidth);
        let nextHeight = mask.scrollHeight + borderHeight;
        /* istanbul ignore if */ if (maxRows > 0) {
            const lineHeight = parseFloat(window.getComputedStyle(mask).lineHeight || DEFAULT_LINE_HEIGHT);
            const maxHeight = maxRows * lineHeight;
            nextHeight = Math.min(maxHeight, nextHeight);
            // only want the textarea to be scrollable if there's a limit on the rows
            // since it'll flash the scrollbar on most OS during the height transition
            if (nextHeight === maxHeight && !scrollable) {
                setScrollable(true);
            } else if (nextHeight !== maxHeight && scrollable) {
                setScrollable(false);
            }
        }
        setHeight(nextHeight + 2);
    }, [
        containerRef,
        maxRows,
        scrollable
    ]);
    const maskRefCallback = useResizeObserver({
        ref: maskRef,
        onUpdate: updateHeight,
        disableHeight: true
    });
    return {
        height: typeof height === "number" ? `${height}px` : undefined,
        maskRef: maskRefCallback,
        scrollable,
        onChange (event) {
            const mask = maskRef.current;
            onChange(event);
            if (event.isPropagationStopped() || !mask || resize !== "auto") {
                return;
            }
            // to get the height transition to work, you have to set the height on:
            // - the main container element (including padding) that has the height
            //    transition enabled
            // - a child div wrapper (without padding) that has the height transition
            //    enabled
            // - the textarea element (without padding) and without a height transition
            //
            // if it isn't done this way, the height transition will look weird since
            // the text will be fixed to the bottom of the area and more text at the top
            // will become visible as the height transition completes. applying the
            // transition on the two parent elements work because:
            // - the height is set immediately on the text field so it expands to show all
            //    the text
            // - the height is correctly applied to both parent elements, but their height
            //    haven't fully been adjusted due to the animation
            // - the parent divs have overflow visible by default, so the textarea's text
            //    will expand past the boundaries of the divs and not cause the upwards
            //    animation weirdness.
            mask.value = event.currentTarget.value;
            updateHeight();
        }
    };
}

//# sourceMappingURL=useResizingTextArea.js.map