"use client";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { cnb } from "cnbuilder";
import { forwardRef, useRef } from "react";
import { useEnsuredId } from "../useEnsuredId.js";
import { useEnsuredRef } from "../useEnsuredRef.js";
import { FormMessageContainer } from "./FormMessageContainer.js";
import { Label } from "./Label.js";
import { TextFieldContainer } from "./TextFieldContainer.js";
import { getFormConfig } from "./formConfig.js";
import { textArea, textAreaContainer } from "./textAreaStyles.js";
import { useResizingTextArea } from "./useResizingTextArea.js";
/**
 * **Client Component**
 *
 * @example
 * Simple Example
 * ```tsx
 * import { TextArea } from "@react-md/core";
 * import type { ReactElement } from "react";
 *
 * function Example(): ReactElement {
 *   return (
 *     <TextArea
 *       label="Label"
 *       placeholder="Placeholder"
 *     />
 *   );
 * }
 * ```
 */ export const TextArea = /*#__PURE__*/ forwardRef(function TextArea(props, ref) {
    const { id: propId, style, className, label, labelProps, labelStyle, labelClassName, areaStyle, areaClassName, resizeContainerProps, resize = "auto", dense = false, error = false, active = false, inline: propInline = false, stretch = false, leftAddon, rightAddon, disableLeftAddonStyles = false, disableRightAddonStyles = false, theme: propTheme, underlineDirection: propUnderlineDirection, messageProps, messageContainerProps, rows = 2, maxRows = -1, onChange: propOnChange, disableTransition = false, ...remaining } = props;
    const { disabled = false, readOnly = false, value, defaultValue } = props;
    const id = useEnsuredId(propId, "text-field");
    const theme = getFormConfig("theme", propTheme);
    const underlineDirection = getFormConfig("underlineDirection", propUnderlineDirection);
    const [areaRef, areaRefCallback] = useEnsuredRef(ref);
    const containerRef = useRef(null);
    const { maskRef, height, onChange, scrollable } = useResizingTextArea({
        maxRows,
        resize,
        onChange: propOnChange,
        containerRef
    });
    let { placeholder = "" } = props;
    if (label && !placeholder) {
        // See the placeholder type definition comments for information
        placeholder = " ";
    }
    // have to force it inline or else you won't be able to resize
    // it horizontally.
    const inline = resize === "horizontal" || resize === "both" || propInline;
    const area = /*#__PURE__*/ _jsx("textarea", {
        ...remaining,
        id: id,
        ref: areaRefCallback,
        rows: rows,
        disabled: disabled,
        onChange: onChange,
        style: areaStyle,
        className: textArea({
            resize,
            scrollable,
            className: areaClassName,
            placeholderHidden: !!label && !active
        })
    });
    const labelNode = label && /*#__PURE__*/ _jsx(Label, {
        ...labelProps,
        htmlFor: id,
        style: labelProps?.style ?? labelStyle,
        className: labelProps?.className ?? labelClassName,
        floating: true,
        dense: dense,
        error: error,
        active: active,
        disabled: disabled,
        children: label
    });
    let children = /*#__PURE__*/ _jsxs(_Fragment, {
        children: [
            area,
            labelNode
        ]
    });
    if (resize === "auto") {
        children = /*#__PURE__*/ _jsxs("div", {
            ...resizeContainerProps,
            className: cnb("rmd-textarea-container__inner", !disableTransition && "rmd-textarea-container__inner--animate", resizeContainerProps?.className),
            children: [
                area,
                labelNode,
                /*#__PURE__*/ _jsx("textarea", {
                    "aria-hidden": true,
                    id: `${id}-mask`,
                    ref: maskRef,
                    defaultValue: value ?? defaultValue,
                    readOnly: true,
                    tabIndex: -1,
                    rows: rows,
                    style: areaStyle,
                    className: textArea({
                        mask: true,
                        resize,
                        className: areaClassName
                    })
                })
            ]
        });
    }
    return /*#__PURE__*/ _jsx(FormMessageContainer, {
        ...messageContainerProps,
        messageProps: messageProps,
        children: /*#__PURE__*/ _jsx(TextFieldContainer, {
            ref: containerRef,
            style: {
                ...style,
                "--rmd-textarea-height": height
            },
            className: textAreaContainer({
                animate: !disableTransition && resize == "auto",
                disabled,
                height: !!height,
                underlineLabelled: !!label && (theme === "underline" || theme === "filled"),
                className
            }),
            theme: theme,
            label: !!label,
            error: error,
            dense: dense,
            inline: inline,
            active: active,
            stretch: stretch,
            readOnly: readOnly,
            disabled: disabled,
            leftAddon: leftAddon,
            rightAddon: rightAddon,
            underlineDirection: underlineDirection,
            disableLeftAddonStyles: disableLeftAddonStyles,
            disableRightAddonStyles: disableRightAddonStyles,
            onClick: (event)=>{
                // The textarea container adds padding-top when there is a label so
                // that the label does not cover the text so this makes it so you
                // can still click anywhere in the "box" to focus the textarea.
                if (!disabled && event.target === event.currentTarget) {
                    areaRef.current?.focus();
                }
            },
            children: children
        })
    });
});

//# sourceMappingURL=TextArea.js.map