'use client';


import { useAuditContentDeclarationField } from "../../../hooks/reactQuery.mjs";
import { Container } from "../../Container/index.mjs";
import { Button, ButtonColor, ButtonSize, ButtonTextAlign, ButtonVariant } from "../../Button/Button.mjs";
import { InputVariant } from "../../Input/Input.mjs";
import { Label } from "../../Label/index.mjs";
import { SwitchSelector, SwitchSelectorColor, SwitchSelectorSize } from "../../SwitchSelector/index.mjs";
import { useLocaleSwitcherContent } from "../../LocaleSwitcherContentDropDown/LocaleSwitcherContentContext.mjs";
import { renameKey } from "../../../utils/object.mjs";
import { ContentEditorInput } from "../../ContentEditor/ContentEditorInput.mjs";
import { ContentEditorTextArea } from "../../ContentEditor/ContentEditorTextArea.mjs";
import { MarkdownRenderer } from "../../MarkDownRender/MarkDownRender.mjs";
import { EnumKeyInput } from "../EnumKeyInput.mjs";
import { useConfiguration, useEditedContent } from "@intlayer/editor-react";
import { Fragment, useState } from "react";
import { Plus, Trash, WandSparkles } from "lucide-react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
import { getEmptyNode, getLocaleName, getNodeType } from "@intlayer/core";
import { useIntlayer, useLocale } from "react-intlayer";
import { NodeType } from "@intlayer/types";

//#region src/components/DictionaryFieldEditor/ContentEditorView/TextEditor.tsx
const traceKeys = [
	"filePath",
	"id",
	"nodeType"
];
const ContentEditorTextArea$1 = ({ keyPath, dictionary, ...props }) => {
	const { editedContent, addEditedContent } = useEditedContent();
	const configuration = useConfiguration();
	const { mutate: auditContentDeclarationField, isPending: isAuditing } = useAuditContentDeclarationField();
	return /* @__PURE__ */ jsx(ContentEditorTextArea, {
		variant: InputVariant.DEFAULT,
		onContentChange: (newValue) => addEditedContent(dictionary.localId, newValue, keyPath),
		additionalButtons: /* @__PURE__ */ jsx(Button, {
			Icon: WandSparkles,
			label: "Audit",
			variant: ButtonVariant.HOVERABLE,
			size: ButtonSize.ICON_SM,
			color: ButtonColor.TEXT,
			className: "cursor-pointer hover:scale-110",
			isLoading: isAuditing,
			onClick: () => {
				auditContentDeclarationField({
					fileContent: JSON.stringify({
						...dictionary,
						...editedContent?.[dictionary.localId] ?? {}
					}),
					keyPath,
					locales: configuration.internationalization.locales ?? [],
					aiOptions: {
						apiKey: configuration.ai?.apiKey,
						model: configuration.ai?.model,
						temperature: configuration.ai?.temperature
					}
				}, { onSuccess: (response) => {
					if (!response?.data) return;
					try {
						const editedContent$1 = response.data.fileContent;
						addEditedContent(dictionary.localId, editedContent$1, keyPath);
					} catch (error) {
						console.error(error);
					}
				} });
			}
		}),
		...props
	});
};
const ContentEditorInput$1 = ({ keyPath, dictionary, ...props }) => {
	const { addEditedContent } = useEditedContent();
	return /* @__PURE__ */ jsx(ContentEditorInput, {
		variant: InputVariant.DEFAULT,
		onContentChange: (newValue) => addEditedContent(dictionary.localId, newValue, keyPath),
		...props
	});
};
const toggleContent = [{
	content: "False",
	value: false
}, {
	content: "True",
	value: true
}];
const ContentEditorToggle = ({ dictionary, keyPath, ...props }) => {
	const { addEditedContent } = useEditedContent();
	return /* @__PURE__ */ jsx(SwitchSelector, {
		choices: toggleContent,
		value: true,
		onChange: (value) => addEditedContent(dictionary.localId, value, keyPath),
		color: SwitchSelectorColor.TEXT,
		size: SwitchSelectorSize.SM,
		...props
	});
};
const TranslationTextEditor = ({ section, keyPath, dictionary, renderSection }) => {
	const { locale, defaultLocale } = useLocale();
	const { selectedLocales, availableLocales } = useLocaleSwitcherContent();
	const sectionContent = section[NodeType.Translation];
	const sectionContentKeys = Object.keys(sectionContent);
	const localesList = availableLocales.length > selectedLocales.length ? selectedLocales : [...new Set([...availableLocales, ...sectionContentKeys])];
	const content = section[NodeType.Translation];
	return /* @__PURE__ */ jsx("table", {
		className: "w-full",
		children: /* @__PURE__ */ jsx("tbody", {
			className: "flex w-full flex-col gap-2",
			children: localesList.map((translationKey) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("tr", {
				className: "mt-2 w-full p-2 text-xs",
				children: /* @__PURE__ */ jsx("td", {
					className: "w-full",
					children: getLocaleName(translationKey, locale)
				})
			}), /* @__PURE__ */ jsx("tr", {
				className: "flex",
				children: /* @__PURE__ */ jsx("td", {
					className: "w-full",
					children: /* @__PURE__ */ jsx(TextEditorContainer, {
						section: content[translationKey] ?? getEmptyNode(content[defaultLocale]),
						keyPath: [...keyPath, {
							type: NodeType.Translation,
							key: translationKey
						}],
						dictionary,
						renderSection
					})
				})
			})] }, translationKey))
		})
	});
};
const EnumerationTextEditor = ({ section, keyPath, dictionary, renderSection }) => {
	const { addEditedContent } = useEditedContent();
	const { addNewEnumeration, removeEnumeration } = useIntlayer("navigation-view");
	const content = section[NodeType.Enumeration];
	const firstKey = Object.keys(content)[0];
	return /* @__PURE__ */ jsxs("div", {
		className: "flex flex-col gap-2",
		children: [/* @__PURE__ */ jsx("table", {
			className: "w-full",
			children: /* @__PURE__ */ jsx("tbody", {
				className: "flex w-full flex-col gap-2",
				children: Object.keys(section[NodeType.Enumeration]).map((enumKey) => {
					const childrenKeyPath = [...keyPath, { type: NodeType.Enumeration }];
					return /* @__PURE__ */ jsxs(Fragment, { children: [
						/* @__PURE__ */ jsx("tr", {
							className: "mt-2 w-full",
							children: /* @__PURE__ */ jsx("div", {
								className: "flex flex-1",
								children: /* @__PURE__ */ jsx(Button, {
									label: removeEnumeration.label.value,
									variant: ButtonVariant.HOVERABLE,
									color: ButtonColor.TEXT,
									Icon: Trash,
									className: "ml-auto",
									onClick: () => addEditedContent(dictionary.localId, void 0, childrenKeyPath),
									children: removeEnumeration.text
								})
							})
						}),
						/* @__PURE__ */ jsx("tr", {
							className: "w-full p-2",
							children: /* @__PURE__ */ jsx(EnumKeyInput, {
								value: enumKey,
								onChange: (value) => {
									const preValueContent = section[NodeType.Enumeration];
									const newValueContent = renameKey(preValueContent, enumKey, value);
									const newValue = {
										...section,
										[NodeType.Enumeration]: newValueContent
									};
									addEditedContent(dictionary.localId, newValue, keyPath);
								}
							})
						}),
						/* @__PURE__ */ jsx("tr", {
							className: "block w-full",
							children: /* @__PURE__ */ jsx(TextEditor, {
								section: content[enumKey] ?? getEmptyNode(content[firstKey]),
								keyPath: childrenKeyPath,
								dictionary,
								renderSection
							})
						})
					] }, enumKey);
				})
			})
		}), /* @__PURE__ */ jsx(Button, {
			label: addNewEnumeration.label.value,
			variant: ButtonVariant.HOVERABLE,
			color: ButtonColor.NEUTRAL,
			textAlign: ButtonTextAlign.LEFT,
			isFullWidth: true,
			onClick: () => addEditedContent(dictionary.localId, getEmptyNode(content[firstKey]) ?? "", [...keyPath, {
				type: NodeType.Enumeration,
				key: "unknown"
			}]),
			Icon: Plus,
			className: "m-2",
			children: addNewEnumeration.text
		})]
	});
};
const ConditionTextEditor = ({ section, keyPath, dictionary, renderSection }) => {
	const content = section[NodeType.Condition];
	return /* @__PURE__ */ jsx("table", {
		className: "w-full",
		children: /* @__PURE__ */ jsx("tbody", {
			className: "flex w-full flex-col gap-2",
			children: [
				"true",
				"false",
				"fallback"
			].map((condKey) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("tr", {
				className: "mt-2 block w-full p-2 text-xs",
				children: /* @__PURE__ */ jsx("td", {
					className: "w-full",
					children: String(condKey)
				})
			}, condKey), /* @__PURE__ */ jsx("tr", {
				className: "block w-full",
				children: /* @__PURE__ */ jsx(TextEditorContainer, {
					section: content[condKey] ?? getEmptyNode(content.true),
					keyPath: [...keyPath, {
						type: NodeType.Condition,
						key: condKey
					}],
					dictionary,
					renderSection
				})
			}, condKey)] }, condKey))
		})
	});
};
const GenderTextEditor = ({ section, keyPath, dictionary, renderSection }) => {
	const content = section[NodeType.Gender];
	return /* @__PURE__ */ jsx("table", {
		className: "w-full",
		children: /* @__PURE__ */ jsx("tbody", {
			className: "flex w-full flex-col gap-2",
			children: [
				"male",
				"female",
				"fallback"
			].map((condKey) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("tr", {
				className: "mt-2 block w-full p-2 text-xs",
				children: /* @__PURE__ */ jsx("td", {
					className: "w-full",
					children: String(condKey)
				})
			}, condKey), /* @__PURE__ */ jsx("tr", {
				className: "block w-full",
				children: /* @__PURE__ */ jsx(TextEditorContainer, {
					section: content[condKey] ?? getEmptyNode(content.male),
					keyPath: [...keyPath, {
						type: NodeType.Gender,
						key: condKey
					}],
					dictionary,
					renderSection
				})
			}, condKey)] }, condKey))
		})
	});
};
const ArrayTextEditor = ({ section, keyPath, dictionary, renderSection }) => {
	const { addEditedContent } = useEditedContent();
	const { addNewElement, removeElement } = useIntlayer("navigation-view");
	return /* @__PURE__ */ jsxs("div", {
		className: "flex flex-col gap-2",
		children: [/* @__PURE__ */ jsx("table", {
			className: "w-full",
			children: /* @__PURE__ */ jsx("tbody", {
				className: "flex w-full flex-col gap-2",
				children: section.map((subSection, index) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("tr", {
					className: "mt-2 flex w-full items-center justify-between gap-2 p-2",
					children: [/* @__PURE__ */ jsx("span", {
						className: "text-xs",
						children: String(index)
					}), /* @__PURE__ */ jsx(Button, {
						label: removeElement.label.value,
						variant: ButtonVariant.HOVERABLE,
						color: ButtonColor.NEUTRAL,
						className: "ml-auto",
						textAlign: ButtonTextAlign.LEFT,
						onClick: () => {
							const newKeyPath = [...keyPath, {
								type: NodeType.Array,
								key: section.length
							}];
							addEditedContent(dictionary.localId, void 0, newKeyPath);
						},
						Icon: Trash,
						children: removeElement.text
					})]
				}), /* @__PURE__ */ jsx("tr", {
					className: "block w-full",
					children: /* @__PURE__ */ jsx(TextEditorContainer, {
						section: subSection ?? getEmptyNode(section[0]),
						keyPath: [...keyPath, {
							type: NodeType.Array,
							key: index
						}],
						dictionary,
						renderSection
					})
				})] }, JSON.stringify(subSection)))
			})
		}), /* @__PURE__ */ jsx(Button, {
			label: addNewElement.label.value,
			variant: ButtonVariant.HOVERABLE,
			color: ButtonColor.NEUTRAL,
			textAlign: ButtonTextAlign.LEFT,
			isFullWidth: true,
			onClick: () => {
				const newKeyPath = [...keyPath, {
					type: NodeType.Array,
					key: section.length
				}];
				addEditedContent(dictionary.localId, getEmptyNode(section[0]) ?? "", newKeyPath, false);
			},
			Icon: Plus,
			children: addNewElement.text
		})]
	});
};
const ObjectTextEditor = ({ section, keyPath, dictionary, renderSection }) => /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx("table", {
	className: "w-full",
	children: /* @__PURE__ */ jsx("tbody", {
		className: "flex flex-col gap-2",
		children: Object.keys(section).map((key) => {
			const childKeyPath = [...keyPath, {
				type: NodeType.Object,
				key
			}];
			const typedSection = section;
			const firstKey = Object.keys(typedSection)[0];
			const subSection = typedSection[key] ?? getEmptyNode(typedSection[firstKey]);
			return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("tr", {
				className: "mt-2 p-2 text-xs",
				children: /* @__PURE__ */ jsx("td", {
					className: "w-full",
					children: String(key)
				})
			}, JSON.stringify(subSection)), /* @__PURE__ */ jsx("tr", {
				className: "block w-full",
				children: /* @__PURE__ */ jsx(TextEditor, {
					section: subSection,
					keyPath: childKeyPath,
					dictionary,
					renderSection
				})
			}, JSON.stringify(subSection))] }, key);
		})
	})
}) });
var MarkdownViewMode = /* @__PURE__ */ function(MarkdownViewMode$1) {
	MarkdownViewMode$1[MarkdownViewMode$1["Edit"] = 0] = "Edit";
	MarkdownViewMode$1[MarkdownViewMode$1["Preview"] = 1] = "Preview";
	return MarkdownViewMode$1;
}(MarkdownViewMode || {});
const MarkdownTextEditor = ({ section, keyPath, dictionary, isDarkMode }) => {
	const [mode, setMode] = useState(MarkdownViewMode.Edit);
	const toggleContent$1 = [{
		content: "Edit",
		value: MarkdownViewMode.Edit
	}, {
		content: "Preview",
		value: MarkdownViewMode.Preview
	}];
	const childKeyPath = [...keyPath, { type: NodeType.Markdown }];
	const content = section[NodeType.Markdown];
	return /* @__PURE__ */ jsxs("div", {
		className: "flex w-full flex-col justify-center gap-6 p-2",
		children: [/* @__PURE__ */ jsx(SwitchSelector, {
			choices: toggleContent$1,
			value: mode,
			onChange: setMode,
			color: SwitchSelectorColor.TEXT,
			size: SwitchSelectorSize.SM,
			className: "ml-auto"
		}), /* @__PURE__ */ jsx(TextEditorContainer, {
			section: content,
			keyPath: childKeyPath,
			dictionary,
			renderSection: mode === MarkdownViewMode.Preview ? (content$1) => /* @__PURE__ */ jsx(MarkdownRenderer, {
				isDarkMode,
				children: content$1
			}) : void 0
		})]
	});
};
const InsertionTextEditor = ({ section, keyPath, ...props }) => {
	const childKeyPath = [...keyPath, { type: NodeType.Insertion }];
	const content = section[NodeType.Insertion];
	return /* @__PURE__ */ jsx("div", {
		className: "flex w-full flex-col justify-center gap-6 p-2",
		children: /* @__PURE__ */ jsx(TextEditorContainer, {
			section: content,
			keyPath: childKeyPath,
			...props
		})
	});
};
const FileTextEditor = ({ section, keyPath, ...props }) => {
	const childKeyPath = [...keyPath, { type: NodeType.File }];
	const fileUrl = section[NodeType.File];
	const { content } = section;
	return /* @__PURE__ */ jsxs("div", {
		className: "flex w-full flex-col justify-center gap-6 p-2",
		children: [/* @__PURE__ */ jsxs("span", {
			className: "text-neutral text-sm",
			children: [fileUrl, " "]
		}), /* @__PURE__ */ jsx(TextEditorContainer, {
			section: content,
			keyPath: childKeyPath,
			...props
		})]
	});
};
const NestedTextEditor = ({ keyPath, dictionary, renderSection, section, ...props }) => {
	const { addEditedContent } = useEditedContent();
	const content = section[NodeType.Nested];
	const childrenKeyPath = [...keyPath, { type: NodeType.Nested }];
	return /* @__PURE__ */ jsxs("div", {
		className: "flex w-full flex-col gap-4 p-2",
		children: [
			/* @__PURE__ */ jsx(Label, { children: "Dictionary key" }),
			/* @__PURE__ */ jsx(ContentEditorInput, {
				"aria-label": "Edit field",
				type: "text",
				variant: InputVariant.DEFAULT,
				...props,
				onContentChange: (newValue) => {
					addEditedContent(dictionary.localId, {
						...content,
						dictionaryKey: String(newValue)
					}, childrenKeyPath);
				},
				children: content.dictionaryKey ?? ""
			}),
			/* @__PURE__ */ jsx(Label, { children: "Path (optional)" }),
			/* @__PURE__ */ jsx(ContentEditorInput, {
				"aria-label": "Edit field",
				type: "text",
				variant: InputVariant.DEFAULT,
				...props,
				onContentChange: (newValue) => {
					addEditedContent(dictionary.localId, {
						...content,
						path: newValue !== "" ? newValue : void 0
					}, childrenKeyPath);
				},
				children: content.path ?? ""
			})
		]
	});
};
const TextEditor = ({ section, keyPath, dictionary, renderSection, isDarkMode }) => {
	const { tsxNotEditable } = useIntlayer("navigation-view");
	const nodeType = getNodeType(section);
	if (nodeType === NodeType.ReactNode) return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", { children: "[React Node]" }), /* @__PURE__ */ jsx("span", {
		className: "text-neutral text-xs",
		children: tsxNotEditable
	})] });
	if (nodeType === NodeType.Nested) return /* @__PURE__ */ jsx(NestedTextEditor, {
		dictionary,
		renderSection,
		keyPath,
		section
	});
	if (nodeType === NodeType.Translation) return /* @__PURE__ */ jsx(TranslationTextEditor, {
		dictionary,
		renderSection,
		keyPath,
		section
	});
	if (nodeType === NodeType.Enumeration) return /* @__PURE__ */ jsx(EnumerationTextEditor, {
		dictionary,
		renderSection,
		keyPath,
		section
	});
	if (nodeType === NodeType.Condition) return /* @__PURE__ */ jsx(ConditionTextEditor, {
		dictionary,
		renderSection,
		keyPath,
		section
	});
	if (nodeType === NodeType.Gender) return /* @__PURE__ */ jsx(GenderTextEditor, {
		dictionary,
		renderSection,
		keyPath,
		section
	});
	if (nodeType === NodeType.Insertion) return /* @__PURE__ */ jsx(InsertionTextEditor, {
		dictionary,
		renderSection,
		keyPath,
		section
	});
	if (nodeType === NodeType.Markdown) return /* @__PURE__ */ jsx(MarkdownTextEditor, {
		dictionary,
		keyPath,
		section,
		isDarkMode
	});
	if (nodeType === NodeType.File) return /* @__PURE__ */ jsx(FileTextEditor, {
		dictionary,
		renderSection,
		keyPath,
		section
	});
	if (nodeType === NodeType.Array) return /* @__PURE__ */ jsx(ArrayTextEditor, {
		dictionary,
		renderSection,
		keyPath,
		section
	});
	if (nodeType === NodeType.Object) return /* @__PURE__ */ jsx(ObjectTextEditor, {
		dictionary,
		renderSection,
		keyPath,
		section
	});
	if (nodeType === NodeType.Number) return /* @__PURE__ */ jsx("div", {
		className: "w-full p-2",
		children: /* @__PURE__ */ jsx(ContentEditorInput$1, {
			dictionary,
			keyPath,
			type: "number",
			"aria-label": "Edit field",
			children: section
		})
	});
	if (nodeType === NodeType.Text) return /* @__PURE__ */ jsx("div", {
		className: "w-full p-2",
		children: typeof renderSection === "function" ? renderSection(section) : /* @__PURE__ */ jsx(ContentEditorTextArea$1, {
			variant: InputVariant.DEFAULT,
			"aria-label": "Edit field",
			keyPath,
			dictionary,
			children: section
		})
	});
	if (nodeType === NodeType.Boolean) return /* @__PURE__ */ jsx("div", {
		className: "w-full p-2",
		children: /* @__PURE__ */ jsx(ContentEditorToggle, {
			dictionary,
			keyPath,
			value: section
		})
	});
	return /* @__PURE__ */ jsxs("div", {
		className: "w-full p-2",
		children: [
			"Error. Format not supported.",
			JSON.stringify(section, null, 2),
			JSON.stringify(keyPath, null, 2),
			"NodeType : ",
			nodeType
		]
	});
};
const TextEditorContainer = (props) => /* @__PURE__ */ jsx(Container, {
	border: true,
	background: "none",
	className: "top-6 flex h-full flex-1 flex-col gap-6 overflow-hidden p-2 md:sticky",
	roundedSize: "xl",
	children: /* @__PURE__ */ jsx(TextEditor, { ...props })
});

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