'use client';

import { cn } from "../../utils/cn.mjs";
import { InputVariant } from "../Input/Input.mjs";
import { AutoSizedTextArea } from "../TextArea/AutoSizeTextArea.mjs";
import { useState } from "react";
import { Check, X } from "lucide-react";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/components/ContentEditor/ContentEditor.tsx
/**
* ContentEditor Component
*
* An inline editing component that allows users to edit text content with
* validation and cancellation options. Built on top of AutoSizedTextArea
* for flexible text editing experiences.
*
* ## Features
* - **Inline Editing**: Edit content directly in place with visual feedback
* - **Auto-sizing**: Textarea automatically adjusts to content size
* - **Validation Controls**: Check and X buttons appear when content is modified
* - **Keyboard Support**: Full keyboard navigation and accessibility
* - **State Management**: Handles editing states and content validation
*
* ## Accessibility
* - Proper ARIA labels for all interactive elements
* - Keyboard navigation support (Tab, Enter, Escape)
* - Screen reader announcements for state changes
* - Focus management between edit and display modes
*
* @param children - The current content to display and edit
* @param onContentChange - Callback when content is saved
* @param isEditing - Whether editor is in editing mode
* @param props - Additional AutoSizedTextArea props
*/
const ContentEditor = ({ children, onContentChange, isEditing, ...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.target.value ?? "");
	const handleKeyDown = (e) => {
		if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
			e.preventDefault();
			handleValid();
		} else if (e.key === "Escape") {
			e.preventDefault();
			handleCancel();
		}
	};
	return /* @__PURE__ */ jsxs("div", {
		className: "flex flex-row items-center justify-between gap-2",
		role: "group",
		"aria-label": "Content editor",
		children: [/* @__PURE__ */ jsx(AutoSizedTextArea, {
			className: cn("break-word m-3 inline w-full bg-transparent outline-hidden", isEditing ? "cursor-text" : "cursor-pointer"),
			onChange: handleOnContentChange,
			onKeyDown: handleKeyDown,
			variant: InputVariant.INVISIBLE,
			defaultValue: children,
			"aria-label": "Editable content",
			"aria-describedby": isEdited ? "content-editor-actions" : void 0,
			...props
		}, resetIncrementor), isEdited && /* @__PURE__ */ jsxs("div", {
			id: "content-editor-actions",
			className: "flex flex-row items-center justify-between gap-2",
			role: "group",
			"aria-label": "Edit actions",
			children: [/* @__PURE__ */ jsx(Check, {
				className: "cursor-pointer text-green-600 hover:scale-110",
				size: 16,
				onClick: handleValid,
				role: "button",
				tabIndex: 0,
				"aria-label": "Save changes (Ctrl+Enter)",
				onKeyDown: (e) => {
					if (e.key === "Enter" || e.key === " ") {
						e.preventDefault();
						handleValid();
					}
				}
			}), /* @__PURE__ */ jsx(X, {
				className: "cursor-pointer text-red-600 hover:scale-110",
				size: 16,
				onClick: handleCancel,
				role: "button",
				tabIndex: 0,
				"aria-label": "Cancel changes (Escape)",
				onKeyDown: (e) => {
					if (e.key === "Enter" || e.key === " ") {
						e.preventDefault();
						handleCancel();
					}
				}
			})]
		})]
	});
};

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