'use client';

import { EditableFieldLayout } from "./EditableFieldLayout.mjs";
import { AutoSizedTextArea } from "../TextArea/AutoSizeTextArea.mjs";
import { useImperativeHandle, useRef } from "react";
import { jsx } from "react/jsx-runtime";

//#region src/components/EditableField/EditableFieldTextArea.tsx
/**
* EditableFieldTextArea Component
*
* An inline editable textarea field that displays as read-only text until clicked.
* When activated, it shows an auto-sized textarea with save and cancel buttons.
* Perfect for multiline text editing with automatic height adjustment.
*
* @example
* ```tsx
* <EditableFieldTextArea
*   defaultValue="Multiline text content"
*   placeholder="Click to edit..."
*   maxRows={10}
*   onSave={(value) => console.log('Saved:', value)}
*   onCancel={() => console.log('Cancelled')}
* />
* ```
*
* ## Features
* - **Inline Editing**: Click to edit, displays as formatted text when not editing
* - **Auto-Sizing**: Automatically adjusts height to fit content
* - **Save/Cancel Actions**: Built-in save and cancel buttons with callbacks
* - **Multiline Support**: Preserves line breaks and formatting
* - **Max Rows Control**: Configurable maximum height with scroll
* - **Auto-save on Click Away**: Saves automatically when clicking outside
* - **Ref Forwarding**: Exposes the underlying textarea element reference
*
* ## Accessibility
* - Uses semantic HTML with proper ARIA attributes
* - Keyboard accessible with tab navigation
* - Screen reader friendly with descriptive labels
* - Focus management for edit mode transitions
* - Preserves whitespace and formatting for screen readers
*
* @param props - EditableFieldTextAreaProps extending AutoSizedTextAreaProps
* @returns React functional component
*/
const EditableFieldTextArea = ({ onSave, onCancel, ref, ...props }) => {
	const textAreaRef = useRef(null);
	useImperativeHandle(ref, () => textAreaRef.current);
	const handleSave = () => {
		onSave?.(textAreaRef.current?.value ?? "");
	};
	const handleCancel = () => {
		if (textAreaRef.current) textAreaRef.current.value = textAreaRef.current.defaultValue ?? "";
		onCancel?.();
	};
	return /* @__PURE__ */ jsx(EditableFieldLayout, {
		value: props.value ?? textAreaRef.current?.value ?? props.defaultValue ?? "",
		onCancel: handleCancel,
		onSave: handleSave,
		onClick: (e) => {
			e.preventDefault();
			e.stopPropagation();
		},
		children: /* @__PURE__ */ jsx(AutoSizedTextArea, {
			className: "leading-6",
			ref: textAreaRef,
			onClick: (e) => {
				e.preventDefault();
				e.stopPropagation();
			},
			...props
		})
	});
};

//#endregion
export { EditableFieldTextArea };
//# sourceMappingURL=EditableFieldTextArea.mjs.map