'use client';


import { Button, ButtonColor, ButtonVariant } from "../Button/Button.mjs";
import { SwitchSelector, SwitchSelectorColor, SwitchSelectorSize } from "../SwitchSelector/index.mjs";
import { SaveForm } from "./SaveForm/SaveForm.mjs";
import { LocaleSwitcherContentProvider } from "../LocaleSwitcherContentDropDown/LocaleSwitcherContentContext.mjs";
import { ContentEditor } from "./ContentEditor.mjs";
import { DictionaryDetailsForm } from "./DictionaryDetails/DictionaryDetailsForm.mjs";
import { JSONEditor } from "./JSONEditor.mjs";
import { StructureEditor } from "./StructureEditor.mjs";
import { ArrowLeft } from "lucide-react";
import { useEffect, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { useIntlayer } from "react-intlayer";
import { useConfiguration, useDictionariesRecordActions, useFocusDictionaryActions } from "@intlayer/editor-react";

//#region src/components/DictionaryFieldEditor/DictionaryFieldEditor.tsx
var EditorViewType = /* @__PURE__ */ function(EditorViewType$1) {
	EditorViewType$1[EditorViewType$1["DetailsEditor"] = 0] = "DetailsEditor";
	EditorViewType$1[EditorViewType$1["ContentEditor"] = 1] = "ContentEditor";
	EditorViewType$1[EditorViewType$1["StructureEditor"] = 2] = "StructureEditor";
	EditorViewType$1[EditorViewType$1["JSONEditor"] = 3] = "JSONEditor";
	return EditorViewType$1;
}(EditorViewType || {});
const DictionaryFieldEditor = ({ dictionary, onClickDictionaryList, isDarkMode, mode, onDelete, onSave }) => {
	const config = useConfiguration();
	const [editorView, setEditorView] = useState(EditorViewType.ContentEditor);
	const { returnToDictionaryList } = useIntlayer("dictionary-field-editor");
	const { setFocusedContent } = useFocusDictionaryActions();
	const { setLocaleDictionaries } = useDictionariesRecordActions();
	useEffect(() => {
		setFocusedContent((prev) => ({
			...prev ?? {},
			dictionaryKey: dictionary.key,
			dictionaryLocalId: dictionary.localId
		}));
		setLocaleDictionaries((prev) => ({
			...prev,
			[dictionary.localId]: dictionary
		}));
	}, []);
	return /* @__PURE__ */ jsx(LocaleSwitcherContentProvider, {
		availableLocales: config?.internationalization.locales ?? [],
		children: /* @__PURE__ */ jsxs("div", {
			className: "flex size-full flex-col gap-6 px-2",
			children: [
				/* @__PURE__ */ jsx(Button, {
					onClick: onClickDictionaryList,
					variant: ButtonVariant.HOVERABLE,
					className: "z-10 mr-auto ml-5",
					color: ButtonColor.TEXT,
					Icon: ArrowLeft,
					label: returnToDictionaryList.label.value,
					children: returnToDictionaryList.text
				}),
				/* @__PURE__ */ jsx(SwitchSelector, {
					defaultValue: editorView,
					onChange: (value) => setEditorView(value),
					color: SwitchSelectorColor.TEXT,
					size: SwitchSelectorSize.SM,
					className: "m-auto w-full max-w-xl",
					choices: [
						{
							content: "Details",
							value: EditorViewType.DetailsEditor
						},
						{
							content: "Structure",
							value: EditorViewType.StructureEditor
						},
						{
							content: "Content",
							value: EditorViewType.ContentEditor
						},
						{
							content: "JSON",
							value: EditorViewType.JSONEditor
						}
					].filter(({ value }) => !(!mode.includes("remote") && value === EditorViewType.DetailsEditor))
				}),
				editorView === EditorViewType.DetailsEditor && /* @__PURE__ */ jsx(DictionaryDetailsForm, { dictionary }),
				editorView === EditorViewType.StructureEditor && /* @__PURE__ */ jsx(StructureEditor, { dictionary }),
				editorView === EditorViewType.ContentEditor && /* @__PURE__ */ jsx(ContentEditor, {
					dictionary,
					isDarkMode
				}),
				editorView === EditorViewType.JSONEditor && /* @__PURE__ */ jsx(JSONEditor, {
					dictionary,
					isDarkMode
				}),
				/* @__PURE__ */ jsx(SaveForm, {
					dictionary,
					mode,
					onDelete: () => {
						setFocusedContent(null);
						onDelete?.();
					},
					onSave
				})
			]
		})
	});
};

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