import React, { useEffect, useRef, useState } from 'react';
import { classNames } from '../types';
export const PHXTextarea = ({ className, error, errorMessage, helpText, label, register, suffix, disabled, ...rest }) => {
    const dynamicPaddingRight = suffix ? `${suffix.length * 0.4 + 1}rem` : '0.75rem';
    const textareaRef = useRef(null);
    const [extraRight, setExtraRight] = useState(0);
    useEffect(() => {
        const checkScroll = () => {
            const el = textareaRef.current;
            if (el) {
                const hasScroll = el.scrollHeight > el.clientHeight;
                const scrollbarWidth = el.offsetWidth - el.clientWidth - 8;
                setExtraRight(hasScroll ? scrollbarWidth : 0);
            }
        };
        checkScroll();
        window.addEventListener('resize', checkScroll);
        return () => window.removeEventListener('resize', checkScroll);
    }, [rest.value, suffix]);
    const { ref: registerRef } = register || {};
    return (React.createElement("div", { className: className },
        label && React.createElement("label", { className: 'mb-1 block text-xs font-normal text-gray-700' }, label),
        React.createElement("div", { className: 'relative' },
            React.createElement("textarea", { ...register, ...rest, ref: (e) => {
                    if (registerRef)
                        registerRef(e);
                    textareaRef.current = e;
                }, className: classNames('shadow-sm block  w-full rounded-lg border-[0.5px] border-gray-500 px-3 py-1.5 text-xs font-normal hover:bg-gray-50 focus:border-gray-500 focus:bg-gray-50 focus:outline-none focus:outline-offset-1 focus:outline-indigo-500 focus:ring-transparent', 'resize-none', error ? 'border-red-800 bg-red-50 hover:bg-red-50 focus:border-red-800 focus:bg-red-50' : '', disabled ? 'bg-gray-50' : '', !suffix && 'pr-3'), disabled: disabled, style: {
                    ...rest.style,
                    ...(suffix && {
                        paddingRight: dynamicPaddingRight,
                        paddingBottom: `${Math.max(((suffix === null || suffix === void 0 ? void 0 : suffix.length) || 0) * 0.3 + 1.5, 2.5)}rem`,
                    }),
                } }),
            suffix && (React.createElement("div", { className: classNames('pointer-events-none absolute bottom-2  select-none whitespace-nowrap text-xs text-gray-500'), style: {
                    right: `calc(0.75rem + ${extraRight}px)`,
                } }, suffix))),
        helpText ? React.createElement("div", { className: 'mt-1 text-xs text-gray-500' }, helpText) : null,
        error && errorMessage ? (React.createElement("div", { className: 'ml-1 mt-1 flex items-center' },
            React.createElement("svg", { className: 'mr-2 h-4 w-4 text-red-500', fill: 'none', stroke: 'currentColor', strokeWidth: '2', viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg' },
                React.createElement("path", { d: 'M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z', strokeLinecap: 'round', strokeLinejoin: 'round' })),
            React.createElement("p", { className: 'text-xs text-red-800' }, errorMessage))) : null));
};
//# sourceMappingURL=Textarea.js.map