/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b67433b | Cube Dev Team */
import { useEvent } from "../../../_internal/hooks/use-event.js";
import { EditableTitleInputElement, HiddenMeasure } from "./styled.js";
import { useLayoutEffect, useRef, useState } from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
import { useTextField } from "react-aria";

//#region src/components/navigation/Tabs/EditableTitle.tsx
/**
* Inline editable title component for tab labels.
*
* When not editing, displays the title as a span with double-click to edit.
* When editing, displays an auto-sizing input field.
*/
function EditableTitle({ title, isEditing, editValue, onEditValueChange, onStartEditing, onSubmit, onCancel }) {
	const inputRef = useRef(null);
	const measureRef = useRef(null);
	const [inputWidth, setInputWidth] = useState(null);
	const justEnteredEditModeRef = useRef(false);
	const { inputProps } = useTextField({
		"aria-label": "Edit tab title",
		value: editValue,
		onChange: onEditValueChange
	}, inputRef);
	useLayoutEffect(() => {
		if (isEditing && inputRef.current) {
			const input = inputRef.current;
			justEnteredEditModeRef.current = true;
			input.focus();
			requestAnimationFrame(() => {
				input.select();
				requestAnimationFrame(() => {
					requestAnimationFrame(() => {
						justEnteredEditModeRef.current = false;
					});
				});
			});
		} else justEnteredEditModeRef.current = false;
	}, [isEditing]);
	useLayoutEffect(() => {
		if (isEditing && measureRef.current) {
			const width = measureRef.current.scrollWidth;
			setInputWidth(width);
		}
	}, [isEditing, editValue]);
	const handleKeyDown = useEvent((e) => {
		if (e.key === "Enter") {
			e.preventDefault();
			onSubmit();
		} else if (e.key === "Escape") {
			e.preventDefault();
			onCancel();
		} else if (e.key === "ArrowLeft" || e.key === "ArrowRight" || e.key === " " || e.key === "Delete" || e.key === "Backspace") e.stopPropagation();
	});
	const handleBlur = useEvent(() => {
		if (justEnteredEditModeRef.current) {
			requestAnimationFrame(() => {
				inputRef.current?.focus();
				inputRef.current?.select();
			});
			return;
		}
		onSubmit();
	});
	const handleDoubleClick = useEvent((e) => {
		e.preventDefault();
		e.stopPropagation();
		onStartEditing();
	});
	if (isEditing) {
		const mergedProps = {
			...inputProps,
			onKeyDown: (e) => {
				handleKeyDown(e);
				inputProps.onKeyDown?.(e);
			},
			onBlur: (e) => {
				handleBlur();
				inputProps.onBlur?.(e);
			}
		};
		return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(HiddenMeasure, {
			ref: measureRef,
			"aria-hidden": "true",
			children: editValue || " "
		}), /* @__PURE__ */ jsx(EditableTitleInputElement, {
			...mergedProps,
			ref: inputRef,
			tokens: { "$input-width": inputWidth ? `${inputWidth}px` : "auto" }
		})] });
	}
	return /* @__PURE__ */ jsx("span", {
		onDoubleClick: handleDoubleClick,
		children: title
	});
}

//#endregion
export { EditableTitle };
//# sourceMappingURL=EditableTitle.js.map