import { jsx, jsxs } from 'react/jsx-runtime';
import React__default, { useState } from 'react';
import { FormLabel } from '../FormLabel/FormLabel.js';
import { textareaTheme } from './Textarea.theme.js';
import { cn } from '../../../utils/cn.js';

const Textarea = React__default.forwardRef(({ size = "md", state = "default", className = "", label, labelClassName = "", helperText, helperTextClassName = "", wrapperClassName = "", inputGroupClassName = "", id, theme = {}, required, rows = 3, cols, unstyled = false, ...props }, ref) => {
    var _a, _b, _c, _d;
    const [isFocused, setIsFocused] = useState(false);
    const generatedId = React__default.useId();
    const inputId = id || generatedId;
    // Derived state flags for internal use
    const isDisabled = state === "disabled";
    const isInvalid = state === "invalid";
    // If unstyled, render only the textarea element
    if (unstyled) {
        return (jsx("textarea", { ref: ref, id: inputId, className: className, disabled: isDisabled, "aria-invalid": isInvalid, required: required, rows: rows, cols: cols, onFocus: (e) => {
                var _a;
                setIsFocused(true);
                (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
            }, onBlur: (e) => {
                var _a;
                setIsFocused(false);
                (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
            }, ...props }));
    }
    // State class for CSS selectors
    const stateClass = isInvalid
        ? "state-invalid"
        : isDisabled
            ? "state-disabled"
            : "state-default";
    // Get theme classes
    const wrapperClasses = theme.wrapperStyle || textareaTheme.wrapperStyle || "";
    const inputGroupClasses = theme.inputGroupStyle || textareaTheme.inputGroupStyle || "";
    const baseClasses = theme.baseStyle || textareaTheme.baseStyle || "";
    const sizeClasses = ((_a = theme.sizes) === null || _a === void 0 ? void 0 : _a[size]) || ((_b = textareaTheme.sizes) === null || _b === void 0 ? void 0 : _b[size]) || "";
    const stateClasses = ((_c = theme.states) === null || _c === void 0 ? void 0 : _c[state]) || ((_d = textareaTheme.states) === null || _d === void 0 ? void 0 : _d[state]) || "";
    const helperTextClasses = theme.helperText || textareaTheme.helperText || "";
    return (jsxs("div", { className: cn(wrapperClasses, stateClass, wrapperClassName), children: [label && (typeof label === 'string' ? (jsx("div", { className: "mb-1", children: jsx(FormLabel, { htmlFor: inputId, className: labelClassName, state: state, required: required, children: label }) })) : (label)), jsx("div", { children: jsx("div", { className: cn(inputGroupClasses, stateClasses, inputGroupClassName), children: jsx("div", { className: "relative flex-1", children: jsx("textarea", { ref: ref, id: inputId, className: cn(baseClasses, sizeClasses, className), disabled: isDisabled, "aria-invalid": isInvalid, required: required, rows: rows, cols: cols, onFocus: (e) => {
                                var _a;
                                setIsFocused(true);
                                (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
                            }, onBlur: (e) => {
                                var _a;
                                setIsFocused(false);
                                (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
                            }, ...props }) }) }) }), helperText && (typeof helperText === 'string' ? (jsx("div", { className: cn(helperTextClasses, helperTextClassName), children: helperText })) : (helperText))] }));
});
Textarea.displayName = "Textarea";

export { Textarea };
