'use client';

import { Container } from "../../Container/index.mjs";
import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../../Button/Button.mjs";
import { InputVariant } from "../../Input/Input.mjs";
import { EditableFieldInput } from "../../EditableField/EditableFieldInput.mjs";
import { NodeTypeSelector } from "../NodeTypeSelector.mjs";
import { Plus, Trash } from "lucide-react";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { getDefaultNode, getNodeChildren, getNodeType, isSameKeyPath } from "@intlayer/core";
import { useIntlayer } from "react-intlayer";
import { useConfiguration, useEditedContentActions, useFocusUnmergedDictionary } from "@intlayer/editor-react";
import { NodeType } from "@intlayer/types";
import { camelCaseToSentence } from "@intlayer/config/client";

//#region src/components/DictionaryFieldEditor/StructureView/StructureView.tsx
const NodeTypeView = ({ section, dictionaryLocalId, keyPath, onNodeTypeChange: onNodeTypeChangeProp }) => {
	const locales = useConfiguration()?.internationalization.locales ?? [];
	const nodeType = getNodeType(section);
	const children = getNodeChildren(section);
	const onNodeTypeChange = (content) => {
		onNodeTypeChangeProp(getDefaultNode(nodeType, locales, content));
	};
	if (nodeType === NodeType.Translation || nodeType === NodeType.Condition || nodeType === NodeType.Gender || nodeType === NodeType.Enumeration) {
		const firstKey = Object.keys(section[nodeType])[0];
		const childrenKeyPath = [...keyPath, {
			type: nodeType,
			key: firstKey
		}];
		return /* @__PURE__ */ jsxs("div", {
			className: "flex w-full flex-col gap-1",
			children: [/* @__PURE__ */ jsx(NodeTypeSelector, {
				section,
				onValueChange: (nodeType$1) => onNodeTypeChangeProp(getDefaultNode(nodeType$1, locales))
			}), /* @__PURE__ */ jsx(NodeTypeView, {
				section: children,
				keyPath: childrenKeyPath,
				dictionaryLocalId,
				onNodeTypeChange
			})]
		});
	}
	if (nodeType === NodeType.Array) {
		const childrenKeyPath = [...keyPath, {
			type: nodeType,
			key: 0
		}];
		return /* @__PURE__ */ jsxs("div", {
			className: "flex w-full flex-col gap-1",
			children: [/* @__PURE__ */ jsx(NodeTypeSelector, {
				section,
				onValueChange: (nodeType$1) => onNodeTypeChangeProp(getDefaultNode(nodeType$1, locales))
			}), /* @__PURE__ */ jsx(NodeTypeView, {
				section: children,
				keyPath: childrenKeyPath,
				dictionaryLocalId,
				onNodeTypeChange
			})]
		});
	}
	if (nodeType === NodeType.Object) return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(NodeTypeSelector, {
		section,
		onValueChange: (nodeType$1) => onNodeTypeChangeProp(getDefaultNode(nodeType$1, locales))
	}), /* @__PURE__ */ jsx("div", {
		className: "mt-6 ml-10",
		children: /* @__PURE__ */ jsx(StructureView, {
			keyPath,
			section,
			dictionaryLocalId
		})
	})] });
	return /* @__PURE__ */ jsx(NodeTypeSelector, {
		section,
		onValueChange: (nodeType$1) => onNodeTypeChangeProp(getDefaultNode(nodeType$1, locales))
	});
};
const NodeView = ({ sectionKey, section, keyPath, dictionaryLocalId }) => {
	const { focusedContent, setFocusedContentKeyPath } = useFocusUnmergedDictionary();
	const { renameEditedContent, addEditedContent } = useEditedContentActions();
	const { titleInput, deleteButton } = useIntlayer("structure-view");
	const handleRenameNodeKey = (keyName) => {
		renameEditedContent(dictionaryLocalId, keyName, keyPath);
		const prevKeyPath = keyPath.slice(0, -1);
		const lastKeyPath = keyPath[keyPath.length - 1];
		setFocusedContentKeyPath([...prevKeyPath, {
			...lastKeyPath,
			key: keyName
		}]);
	};
	return /* @__PURE__ */ jsx(Container, {
		transparency: "xl",
		roundedSize: "xl",
		className: "w-full min-w-80 gap-2 overflow-auto px-5 py-2",
		border: true,
		borderColor: "text",
		background: "none",
		"aria-selected": isSameKeyPath(keyPath, focusedContent?.keyPath ?? []),
		onClick: () => setFocusedContentKeyPath(keyPath),
		children: /* @__PURE__ */ jsxs("div", {
			className: "flex w-full flex-col items-start justify-between gap-3",
			children: [typeof sectionKey === "string" && /* @__PURE__ */ jsxs("div", {
				className: "w-full",
				children: [/* @__PURE__ */ jsxs("div", {
					className: "flex w-full items-center justify-between gap-10",
					children: [/* @__PURE__ */ jsx(EditableFieldInput, {
						name: "key",
						"aria-label": "Key",
						placeholder: titleInput.placeholder.value,
						defaultValue: sectionKey,
						onSave: (value) => handleRenameNodeKey(value),
						variant: InputVariant.INVISIBLE
					}), /* @__PURE__ */ jsx(Button, {
						label: deleteButton.label.value,
						variant: ButtonVariant.HOVERABLE,
						size: ButtonSize.ICON_SM,
						color: ButtonColor.TEXT,
						className: "translate-x-2",
						Icon: Trash,
						onClick: () => {
							addEditedContent(dictionaryLocalId, void 0, keyPath);
							setFocusedContentKeyPath(keyPath.slice(0, -1));
						}
					})]
				}), /* @__PURE__ */ jsxs("span", {
					className: "ml-3 text-neutral text-sm",
					children: [
						"( ",
						camelCaseToSentence(sectionKey),
						" )"
					]
				})]
			}), /* @__PURE__ */ jsx(NodeTypeView, {
				keyPath,
				dictionaryLocalId,
				section,
				onNodeTypeChange: (content) => {
					addEditedContent(dictionaryLocalId, content, keyPath);
				}
			})]
		})
	});
};
const ObjectView = ({ section, keyPath, dictionaryLocalId }) => {
	const { addNodeButton } = useIntlayer("structure-view");
	const { setFocusedContentKeyPath } = useFocusUnmergedDictionary();
	const { addEditedContent } = useEditedContentActions();
	if (!section || typeof section !== "object") return /* @__PURE__ */ jsx("div", { children: "Not an object" });
	return /* @__PURE__ */ jsxs("div", {
		className: "flex flex-col gap-2 overflow-y-auto",
		children: [/* @__PURE__ */ jsx("ul", {
			className: "mr-auto flex flex-col gap-4",
			children: Object.keys(section).map((key) => /* @__PURE__ */ jsx("li", {
				className: "flex w-full",
				children: /* @__PURE__ */ jsx(NodeView, {
					sectionKey: key,
					section: section?.[key],
					keyPath: [...keyPath, {
						type: NodeType.Object,
						key
					}],
					dictionaryLocalId
				})
			}, `${JSON.stringify(keyPath)}-object-${key}`))
		}), /* @__PURE__ */ jsx(Button, {
			label: addNodeButton.label.value,
			variant: ButtonVariant.HOVERABLE,
			size: ButtonSize.MD,
			color: ButtonColor.TEXT,
			Icon: Plus,
			className: "flex-1",
			onClick: () => {
				const newKey = "newKey";
				const newKeyPath = [...keyPath, {
					type: NodeType.Object,
					key: newKey
				}];
				addEditedContent(dictionaryLocalId, "", newKeyPath);
				setFocusedContentKeyPath(newKeyPath);
			},
			children: addNodeButton.text
		})]
	});
};
const StructureView = ({ section, keyPath, dictionaryLocalId }) => {
	if (!section || typeof section !== "object" || typeof section.nodeType === "string") return /* @__PURE__ */ jsx(NodeView, {
		sectionKey: "content",
		section,
		keyPath,
		dictionaryLocalId
	});
	return /* @__PURE__ */ jsx(ObjectView, {
		section,
		keyPath,
		dictionaryLocalId
	});
};

//#endregion
export { NodeView, ObjectView, StructureView };
//# sourceMappingURL=StructureView.mjs.map