'use client';


import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../Button/Button.mjs";
import { Input, InputVariant } from "../Input/Input.mjs";
import { Check, X } from "lucide-react";
import { useEffect, useState } from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

//#region src/components/ContentEditor/ContentEditorInput.tsx
/**
* ContentEditorInput Component
*
* An inline editing component for single-line text input with validation,
* cancel/save functionality, and support for additional action buttons.
*
* ## Features
* - **Inline Input Editing**: Edit single-line content with immediate feedback
* - **Validation Support**: Optional content validation with visual feedback
* - **Action Buttons**: Built-in save/cancel with support for additional buttons
* - **Keyboard Shortcuts**: Enter to save, Escape to cancel
* - **Accessibility**: Full ARIA support and keyboard navigation
* - **State Management**: Handles editing states and validation
*
* ## Accessibility
* - Proper ARIA labels and descriptions for all controls
* - Keyboard navigation (Tab, Enter, Escape)
* - Screen reader support for validation states
* - Focus management and visual indicators
*
* @param children - Current input value
* @param onContentChange - Callback when content is saved
* @param disabled - Whether the editor is disabled
* @param validate - Optional validation function
* @param additionalButtons - Extra buttons to display
* @param props - Additional Input component props
*/
const ContentEditorInput = ({ children, onContentChange, disabled, validate, additionalButtons,...props }) => {
	const [newValue, setNewValue] = useState(children);
	const [resetIncrementor, setResetIncrementor] = useState(0);
	const isEdited = newValue !== children;
	const handleCancel = () => {
		setNewValue(children);
		setResetIncrementor((prev) => prev + 1);
	};
	const handleValid = () => {
		onContentChange(newValue);
	};
	const handleOnContentChange = (e) => {
		setNewValue(e.currentTarget.value);
	};
	const handleKeyDown = (e) => {
		if (e.key === "Enter" && !disabled && isValid) {
			e.preventDefault();
			handleValid();
		} else if (e.key === "Escape") {
			e.preventDefault();
			handleCancel();
		}
	};
	useEffect(() => {
		setNewValue(children);
		setResetIncrementor((prev) => prev + 1);
	}, [children]);
	const isValid = validate?.(newValue) ?? true;
	return /* @__PURE__ */ jsxs("div", {
		className: "flex size-full flex-col items-center justify-between gap-2",
		role: "group",
		"aria-label": "Content editor input",
		children: [/* @__PURE__ */ jsx(Input, {
			onChange: handleOnContentChange,
			onKeyDown: handleKeyDown,
			"aria-label": "Editable input value",
			"aria-describedby": isEdited || additionalButtons ? "content-editor-input-actions" : void 0,
			"aria-invalid": !isValid,
			variant: InputVariant.INVISIBLE,
			className: "size-full",
			defaultValue: children,
			disabled,
			...props
		}, resetIncrementor), (isEdited || additionalButtons) && /* @__PURE__ */ jsxs("div", {
			id: "content-editor-input-actions",
			className: "flex w-full items-center justify-end gap-2",
			role: "group",
			"aria-label": "Edit actions",
			children: [isEdited && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
				Icon: Check,
				label: `Save changes${!isValid ? " (invalid content)" : ""}`,
				variant: ButtonVariant.HOVERABLE,
				color: ButtonColor.TEXT,
				size: ButtonSize.ICON_SM,
				className: "cursor-pointer hover:scale-110",
				disabled: disabled || !isValid,
				onClick: handleValid,
				"aria-describedby": !isValid ? "validation-error" : void 0
			}), /* @__PURE__ */ jsx(Button, {
				Icon: X,
				label: "Cancel changes",
				variant: ButtonVariant.HOVERABLE,
				size: ButtonSize.ICON_SM,
				color: ButtonColor.TEXT,
				className: "cursor-pointer hover:scale-110",
				onClick: handleCancel,
				disabled
			})] }), additionalButtons]
		})]
	}, String(children));
};

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