import { Container } from "../Container/index.mjs";
import { MonacoCode } from "../IDE/MonacoCode.mjs";
import { useEditedContent } from "@intlayer/editor-react";
import { useMemo } from "react";
import { jsx } from "react/jsx-runtime";

//#region src/components/DictionaryFieldEditor/JSONEditor.tsx
const JSONEditor = ({ dictionary, isDarkMode }) => {
	const { setEditedContent, editedContent } = useEditedContent();
	const isValidJSON = (jsonString) => {
		try {
			JSON.parse(jsonString);
			return true;
		} catch (_error) {
			return false;
		}
	};
	const displayedContent = useMemo(() => editedContent?.[dictionary.localId]?.content ?? dictionary?.content ?? {}, [dictionary]);
	return /* @__PURE__ */ jsx(Container, {
		background: "none",
		border: true,
		roundedSize: "xl",
		className: "w-full overflow-hidden p-3",
		children: /* @__PURE__ */ jsx(MonacoCode, {
			language: "json",
			onChange: (content) => {
				if (isValidJSON(content ?? "{}")) setEditedContent(dictionary.localId, JSON.parse(content ?? "{}"));
			},
			isDarkMode,
			children: JSON.stringify(displayedContent, null, 2)
		})
	});
};

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