import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import cx from 'classnames';
import { forwardRef, useCallback, useRef, } from 'react';
import './style.scss';
const AppTextArea = forwardRef(function AppTextArea({ showLineNumbers = false, containerClassName, className, value, defaultValue, onScroll, ...rest }, ref) {
    const gutterRef = useRef(null);
    const setTextareaRef = useCallback((node) => {
        if (typeof ref === 'function') {
            ref(node);
        }
        else if (ref) {
            ref.current = node;
        }
    }, [ref]);
    const textValue = value !== undefined
        ? String(value)
        : defaultValue !== undefined
            ? String(defaultValue)
            : '';
    const lines = Math.max(textValue.split('\n').length, 1);
    const handleScroll = (e) => {
        if (gutterRef.current) {
            gutterRef.current.scrollTop = e.currentTarget.scrollTop;
        }
        onScroll?.(e);
    };
    return (_jsxs("div", { className: cx('app-text-area', { 'app-text-area--numbered': showLineNumbers }, containerClassName), children: [showLineNumbers && (_jsx("div", { className: "app-text-area__gutter", "aria-hidden": true, ref: gutterRef, children: Array.from({ length: lines }, (_, i) => (_jsx("div", { children: i + 1 }, i))) })), _jsx("textarea", { ref: setTextareaRef, className: cx('app-text-area__input', className), value: value, defaultValue: defaultValue, onScroll: handleScroll, ...rest })] }));
});
export default AppTextArea;
