'use client';


import { Container } from "../Container/index.mjs";
import { LocaleSwitcherContent } from "../LocaleSwitcherContentDropDown/LocaleSwitcherContent.mjs";
import { TextEditorContainer } from "./ContentEditorView/TextEditor.mjs";
import { getIsEditableSection } from "./getIsEditableSection.mjs";
import { KeyPathBreadcrumb } from "./KeyPathBreadcrumb.mjs";
import { NavigationViewNode } from "./NavigationView/NavigationViewNode.mjs";
import { useEffect } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { getContentNodeByKeyPath } from "@intlayer/core";
import { useEditedContent, useFocusDictionary } from "@intlayer/editor-react";

//#region src/components/DictionaryFieldEditor/ContentEditor.tsx
const ContentEditor = ({ dictionary, isDarkMode }) => {
	const { content, key, localId } = dictionary;
	const { editedContent } = useEditedContent();
	const { focusedContent, setFocusedContentKeyPath } = useFocusDictionary();
	const focusedKeyPath = focusedContent?.keyPath;
	const section = typeof editedContent?.[localId]?.content === "undefined" ? content : editedContent?.[localId]?.content;
	const focusedSection = getContentNodeByKeyPath(section, focusedKeyPath ?? []);
	const isEditableBaseSection = getIsEditableSection(section);
	const isEditableFocusedSection = getIsEditableSection(focusedSection);
	useEffect(() => {
		if (typeof focusedSection === "undefined") setFocusedContentKeyPath(focusedContent?.keyPath?.slice(0, -1) ?? []);
	}, []);
	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
		className: "mb-6 flex items-center justify-between gap-2",
		children: [/* @__PURE__ */ jsx(KeyPathBreadcrumb, {
			dictionaryKey: key,
			keyPath: focusedKeyPath ?? [],
			onClickKeyPath: setFocusedContentKeyPath
		}), /* @__PURE__ */ jsx("div", {
			className: "flex items-center gap-2",
			children: /* @__PURE__ */ jsx(LocaleSwitcherContent, {})
		})]
	}), /* @__PURE__ */ jsxs("div", {
		className: "flex gap-2 max-md:flex-col",
		children: [typeof section === "object" && section && !isEditableBaseSection && Object.keys(section).length > 0 && /* @__PURE__ */ jsx(Container, {
			border: true,
			background: "none",
			className: "top-6 flex h-full flex-col items-start gap-0.5 overflow-auto p-2 md:sticky md:max-w-[50%]",
			roundedSize: "xl",
			transparency: "sm",
			children: /* @__PURE__ */ jsx(NavigationViewNode, {
				keyPath: [],
				section,
				dictionary
			})
		}), (isEditableFocusedSection || (focusedKeyPath ?? []).length > 0) && /* @__PURE__ */ jsx(TextEditorContainer, {
			keyPath: focusedKeyPath ?? [],
			section: focusedSection,
			dictionary,
			isDarkMode
		})]
	})] });
};

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