import { cn } from "../../../utils/cn.mjs";
import { EditableFieldTextArea } from "../../EditableField/EditableFieldTextArea.mjs";
import { useEditorLocale } from "@intlayer/editor-react";
import { Fragment, jsx } from "react/jsx-runtime";
import { getContentNodeByKeyPath } from "@intlayer/core";

//#region src/components/DictionaryEditor/NodeWrapper/StringWrapper.tsx
const StringWrapper = ({ keyPath, section, editedContent, editedContentValue: editedContentValueProp, onContentChange, onFocusKeyPath, renderSection }) => {
	const currentLocale = useEditorLocale();
	const editedContentValue = editedContentValueProp ?? getContentNodeByKeyPath(editedContent, keyPath, currentLocale);
	if (editedContentValue && typeof editedContentValue !== "string") return /* @__PURE__ */ jsx(Fragment, { children: "Error loading section - Edited content Incoherence with the original content format" });
	const level = keyPath.length;
	const content = String(editedContentValue ?? section);
	return /* @__PURE__ */ jsx("span", {
		role: "button",
		tabIndex: 0,
		className: cn("w-full rounded-md p-2 text-left transition", "hover:bg-card/30 [&:has(.section:hover)]:bg-transparent", level === 2 && "hover:bg-card/30", level >= 3 && ""),
		onClick: (e) => {
			e.stopPropagation();
			onFocusKeyPath(keyPath);
		},
		children: typeof renderSection === "function" ? renderSection(content) : /* @__PURE__ */ jsx(EditableFieldTextArea, {
			"aria-label": "Editable field",
			defaultValue: content,
			onSave: (newValue) => onContentChange({
				keyPath,
				newValue
			}),
			onCancel: () => null
		})
	});
};

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