import { Button, ButtonColor, ButtonTextAlign, ButtonVariant } from "../../Button/Button.mjs";
import { Accordion } from "../../Accordion/Accordion.mjs";
import { getIsEditableSection } from "../getIsEditableSection.mjs";
import { camelCaseToSentence } from "../../../utils/camelCase.mjs";
import { ChevronRight, Plus } from "lucide-react";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { getContentNodeByKeyPath, getEmptyNode, getNodeType, isSameKeyPath } from "@intlayer/core";
import { useIntlayer } from "react-intlayer";
import { useEditedContentActions, useEditorLocale, useFocusUnmergedDictionary } from "@intlayer/editor-react";
import configuration from "@intlayer/config/built";
import { NodeType } from "@intlayer/types";

//#region src/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.tsx
const traceKeys = [
	"filePath",
	"id",
	"nodeType"
];
const NavigationViewNode = ({ section: sectionProp, keyPath, dictionary }) => {
	const { locales } = configuration.internationalization;
	const section = getContentNodeByKeyPath(sectionProp, keyPath, useEditorLocale());
	const { addEditedContent } = useEditedContentActions();
	const { setFocusedContentKeyPath, focusedContent } = useFocusUnmergedDictionary();
	const { addNewElement, goToField } = useIntlayer("navigation-view");
	const nodeType = getNodeType(section);
	const getIsSelected = (keyPath$1) => (focusedContent?.keyPath?.length ?? 0) > 0 && isSameKeyPath(keyPath$1, focusedContent?.keyPath ?? []);
	const isEditableSubSection = getIsEditableSection(section);
	if (!section) return /* @__PURE__ */ jsx(Fragment, {});
	if (isEditableSubSection) return /* @__PURE__ */ jsx(Button, {
		label: goToField.label.value,
		variant: ButtonVariant.HOVERABLE,
		color: ButtonColor.TEXT,
		className: "w-full",
		onClick: () => setFocusedContentKeyPath(keyPath),
		IconRight: ChevronRight,
		children: camelCaseToSentence(keyPath[keyPath.length - 1].key)
	});
	if (typeof section === "object") {
		if (nodeType === NodeType.ReactNode) return /* @__PURE__ */ jsx(Fragment, { children: "React Node" });
		if (nodeType === NodeType.Translation) return /* @__PURE__ */ jsx("div", {
			className: "flex flex-col justify-between gap-2",
			children: locales.map((translationKey) => {
				return /* @__PURE__ */ jsx(NavigationViewNode, {
					keyPath: [...keyPath, {
						type: NodeType.Translation,
						key: translationKey
					}],
					section: sectionProp,
					dictionary
				}, translationKey);
			})
		});
		if (nodeType === NodeType.Enumeration || nodeType === NodeType.Condition) return /* @__PURE__ */ jsx("div", {
			className: "flex flex-col justify-between gap-2",
			children: Object.keys(section[nodeType]).map((key) => {
				return /* @__PURE__ */ jsx(NavigationViewNode, {
					keyPath: [...keyPath, {
						type: nodeType,
						key
					}],
					section: sectionProp,
					dictionary
				}, key);
			})
		});
		if (nodeType === NodeType.Array) return /* @__PURE__ */ jsxs("div", {
			className: "flex flex-col justify-between gap-2",
			children: [section.map((_, index) => {
				const childKeyPath = [...keyPath, {
					type: NodeType.Array,
					key: index
				}];
				return /* @__PURE__ */ jsx(NavigationViewNode, {
					keyPath: childKeyPath,
					section: sectionProp,
					dictionary
				}, JSON.stringify(childKeyPath));
			}), /* @__PURE__ */ jsx(Button, {
				label: addNewElement.label.value,
				variant: ButtonVariant.HOVERABLE,
				color: ButtonColor.NEUTRAL,
				textAlign: ButtonTextAlign.LEFT,
				onClick: () => {
					const newKeyPath = [...keyPath, {
						type: NodeType.Array,
						key: section.length
					}];
					const sectionArray = section;
					const emptySectionEl = getEmptyNode(sectionArray[sectionArray.length - 1]) ?? "";
					addEditedContent(dictionary.localId, emptySectionEl, newKeyPath, false);
					setFocusedContentKeyPath(newKeyPath);
				},
				Icon: Plus,
				children: addNewElement.text
			})]
		});
		if (typeof section.nodeType === "string") return /* @__PURE__ */ jsx(NavigationViewNode, {
			keyPath: [...keyPath, { type: section.nodeType }],
			section: sectionProp,
			dictionary
		});
		return /* @__PURE__ */ jsx("div", {
			className: "flex w-full max-w-full flex-col justify-between gap-2",
			children: Object.keys(section).map((key) => {
				const childKeyPath = [...keyPath, {
					type: NodeType.Object,
					key
				}];
				if (getIsEditableSection(getContentNodeByKeyPath(sectionProp, childKeyPath))) return /* @__PURE__ */ jsx(Button, {
					label: `${goToField.label.value} ${key}`,
					isActive: getIsSelected(childKeyPath),
					variant: ButtonVariant.HOVERABLE,
					color: ButtonColor.TEXT,
					className: "w-full",
					onClick: () => setFocusedContentKeyPath(childKeyPath),
					IconRight: ChevronRight,
					children: camelCaseToSentence(key)
				}, key);
				return /* @__PURE__ */ jsx(Accordion, {
					label: `${goToField.label.value} ${key}`,
					isActive: getIsSelected(childKeyPath),
					onClick: () => setFocusedContentKeyPath(childKeyPath),
					header: camelCaseToSentence(key),
					children: /* @__PURE__ */ jsx("div", {
						className: "mt-2 flex w-full max-w-full",
						children: /* @__PURE__ */ jsx("div", {
							className: "flex-1 pl-10",
							children: /* @__PURE__ */ jsx(NavigationViewNode, {
								keyPath: childKeyPath,
								section: sectionProp,
								dictionary
							})
						})
					})
				}, key);
			})
		});
	}
	return /* @__PURE__ */ jsxs(Fragment, { children: [
		"Error loading section --",
		nodeType,
		"--",
		JSON.stringify(section),
		"--",
		JSON.stringify(keyPath)
	] });
};

//#endregion
export { NavigationViewNode, traceKeys };
//# sourceMappingURL=NavigationViewNode.mjs.map