'use client';

import { Input } from "../Input/Input.mjs";
import { EditableFieldLayout } from "./EditableFieldLayout.mjs";
import { useImperativeHandle, useMemo, useRef } from "react";
import { jsx } from "react/jsx-runtime";

//#region src/components/EditableField/EditableFieldInput.tsx
/**
* EditableFieldInput Component
*
* An inline editable input field that displays as read-only text until clicked.
* When activated, it shows an input field with save and cancel buttons.
*
* @example
* ```tsx
* <EditableFieldInput
*   defaultValue="Edit me"
*   placeholder="Click to edit..."
*   onSave={(value) => console.log('Saved:', value)}
*   onCancel={() => console.log('Cancelled')}
* />
* ```
*
* ## Features
* - **Inline Editing**: Click to edit, displays as text when not editing
* - **Save/Cancel Actions**: Built-in save and cancel buttons with callbacks
* - **Keyboard Support**: Accessible keyboard navigation
* - **Input Variants**: Supports all Input component variants and sizes
* - **Auto-save on Click Away**: Saves automatically when clicking outside
* - **Ref Forwarding**: Exposes the underlying input 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
*
* @param props - EditableFieldInputProps extending InputProps
* @returns React functional component
*/
const EditableFieldInput = ({ onSave, onCancel, ref, ...props }) => {
	const inputRef = useRef(null);
	const handleSave = () => {
		onSave?.(inputRef.current?.value ?? "");
	};
	const handleCancel = () => {
		if (inputRef.current) inputRef.current.value = inputRef.current.defaultValue ?? "";
		onCancel?.();
	};
	useImperativeHandle(ref, () => inputRef.current);
	return /* @__PURE__ */ jsx(EditableFieldLayout, {
		value: useMemo(() => props.value ?? inputRef.current?.value ?? props.defaultValue, [
			props.value,
			props.defaultValue,
			inputRef.current?.value
		]),
		onCancel: handleCancel,
		onSave: handleSave,
		children: /* @__PURE__ */ jsx(Input, {
			ref: inputRef,
			...props
		})
	});
};

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