import { ItemLayout } from "../ItemLayout.mjs";
import { NodeWrapper, traceKeys } from "./index.mjs";
import { memo, useMemo } from "react";
import { jsx } from "react/jsx-runtime";
import { isSameKeyPath } from "@intlayer/core";
import { NodeType } from "@intlayer/types";
import { camelCaseToSentence } from "@intlayer/config/client";

//#region src/components/DictionaryEditor/NodeWrapper/NestedObjectWrapper.tsx
const NestedObjectWrapper = memo((props) => {
	const { keyPath, section, focusedKeyPath = [], onFocusKeyPath } = props;
	return useMemo(() => Object.keys(section ?? {}).filter((key) => !traceKeys.includes(key)), [section]).map((key) => {
		const newKeyPathEl = {
			key,
			type: NodeType.Object
		};
		const newKeyPath = [...keyPath, newKeyPathEl];
		const isSelected = isSameKeyPath(newKeyPath, focusedKeyPath);
		return /* @__PURE__ */ jsx(ItemLayout, {
			level: keyPath.length,
			title: camelCaseToSentence(key),
			description: "",
			isSelected,
			onClick: (e) => {
				e.stopPropagation();
				if (isSelected) onFocusKeyPath([]);
				else onFocusKeyPath(newKeyPath);
			},
			children: /* @__PURE__ */ jsx(NodeWrapper, {
				...props,
				keyPath: newKeyPath,
				section: section[key]
			})
		}, key);
	});
});

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