'use client';


import { Loader } from "../../Loader/index.mjs";
import { ButtonColor, ButtonSize, ButtonVariant } from "../../Button/Button.mjs";
import { Container } from "../../Container/index.mjs";
import { useSession } from "../../../hooks/useAuth/useSession.mjs";
import { useAuditContentDeclarationMetadata, useGetProjects, useGetTags } from "../../../hooks/reactQuery.mjs";
import { MultiSelect } from "../../Select/Multiselect.mjs";
import { useForm } from "../../Form/FormBase.mjs";
import { Form } from "../../Form/Form.mjs";
import { useDictionaryDetailsSchema } from "./useDictionaryDetailsSchema.mjs";
import { WandSparkles } from "lucide-react";
import { useEffect } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { useIntlayer } from "react-intlayer";
import { useEditedContent } from "@intlayer/editor-react";

//#region src/components/DictionaryFieldEditor/DictionaryDetails/DictionaryDetailsForm.tsx
const DictionaryDetailsForm = ({ dictionary }) => {
	const { session } = useSession();
	const { project } = session ?? {};
	const { data: projects, isLoading: isLoadingProjects } = useGetProjects();
	const { data: tags } = useGetTags();
	const DictionaryDetailsSchema = useDictionaryDetailsSchema(String(project?.id));
	const { form, isSubmitting } = useForm(DictionaryDetailsSchema, { defaultValues: dictionary });
	const { editedContent, setEditedDictionary } = useEditedContent();
	const { titleInput, keyInput, descriptionInput, projectInput, tagsSelect, auditButton } = useIntlayer("dictionary-details");
	const { mutate: auditContentDeclaration, isPending: isAuditing } = useAuditContentDeclarationMetadata();
	const updatedDictionary = editedContent?.[dictionary.localId];
	useEffect(() => {
		form.reset(dictionary);
	}, [dictionary, form?.reset]);
	useEffect(() => {
		if (typeof updatedDictionary === "undefined") form.reset(dictionary);
	}, [updatedDictionary]);
	const handleOnAuditFile = () => {
		const dictionaryToAudit = {
			...dictionary,
			...updatedDictionary
		};
		auditContentDeclaration({ fileContent: JSON.stringify(dictionaryToAudit) }, { onSuccess: (response) => {
			if (!response?.data) return;
			try {
				const auditedDictionary = response.data.fileContent;
				setEditedDictionary((prev) => ({
					...prev,
					...dictionaryToAudit,
					...auditedDictionary
				}));
				form.reset({
					...dictionaryToAudit,
					...auditedDictionary
				});
			} catch (error) {
				console.error(error);
			}
		} });
	};
	return /* @__PURE__ */ jsx(Container, {
		background: "none",
		border: true,
		roundedSize: "2xl",
		className: "w-full px-5 pt-5 pb-3",
		children: /* @__PURE__ */ jsxs(Form, {
			className: "flex w-full flex-col gap-8",
			...form,
			schema: DictionaryDetailsSchema,
			onChange: (data) => {
				setEditedDictionary((prev) => ({
					...prev,
					...data
				}));
			},
			children: [
				/* @__PURE__ */ jsxs("div", {
					className: "flex w-full flex-1 gap-8 max-md:flex-col",
					children: [/* @__PURE__ */ jsx(Form.EditableFieldInput, {
						name: "key",
						label: keyInput.label,
						placeholder: keyInput.label.value,
						description: keyInput.description,
						disabled: isSubmitting,
						isRequired: true,
						onSave: (value) => {
							form.setValue("key", value);
							setEditedDictionary((prev) => ({
								...dictionary,
								...prev ?? {},
								key: value
							}));
						}
					}), /* @__PURE__ */ jsx(Form.EditableFieldInput, {
						name: "title",
						label: titleInput.label,
						placeholder: titleInput.placeholder.value,
						description: titleInput.description,
						disabled: isSubmitting,
						onSave: (value) => {
							form.setValue("title", value);
							setEditedDictionary((prev) => ({
								...dictionary,
								...prev ?? {},
								title: value
							}));
						}
					})]
				}),
				/* @__PURE__ */ jsx(Form.EditableFieldTextArea, {
					name: "description",
					label: descriptionInput.label,
					placeholder: descriptionInput.placeholder.value,
					description: descriptionInput.description,
					disabled: isSubmitting,
					onSave: (value) => {
						form.setValue("description", value);
						setEditedDictionary((prev) => ({
							...dictionary,
							...prev ?? {},
							description: value
						}));
					}
				}),
				/* @__PURE__ */ jsxs("div", {
					className: "flex size-full flex-1 gap-8 max-md:flex-col",
					children: [/* @__PURE__ */ jsxs(Form.MultiSelect, {
						name: "projectIds",
						label: projectInput.label.value,
						description: projectInput.description.value,
						onValueChange: (value) => {
							const valueArray = [value].flat();
							form.setValue("projectIds", valueArray);
							setEditedDictionary((prev) => ({
								...dictionary,
								...prev ?? {},
								projectIds: valueArray
							}));
						},
						children: [/* @__PURE__ */ jsx(MultiSelect.Trigger, {
							getBadgeValue: (value) => projects?.data?.find((project$1) => String(project$1.id) === value)?.name ?? value,
							children: /* @__PURE__ */ jsx(MultiSelect.Input, { placeholder: projectInput.placeholder.value })
						}), /* @__PURE__ */ jsx(MultiSelect.Content, { children: /* @__PURE__ */ jsx(Loader, {
							isLoading: isLoadingProjects,
							children: /* @__PURE__ */ jsx(MultiSelect.List, { children: projects?.data?.map((project$1) => /* @__PURE__ */ jsx(MultiSelect.Item, {
								value: String(project$1.id),
								children: project$1.name
							}, String(project$1.id))) })
						}) })]
					}), /* @__PURE__ */ jsxs(Form.MultiSelect, {
						name: "tags",
						label: tagsSelect.label.value,
						description: tagsSelect.description.value,
						onValueChange: (value) => {
							form.setValue("tags", [value].flat());
							setEditedDictionary((prev) => ({
								...dictionary,
								...prev ?? {},
								tags: [value].flat()
							}));
						},
						children: [/* @__PURE__ */ jsx(MultiSelect.Trigger, {
							getBadgeValue: (value) => projects?.data?.find((project$1) => String(project$1.id) === value)?.name ?? value,
							children: /* @__PURE__ */ jsx(MultiSelect.Input, { placeholder: tagsSelect.placeholder.value })
						}), /* @__PURE__ */ jsx(MultiSelect.Content, { children: /* @__PURE__ */ jsx(Loader, {
							isLoading: isLoadingProjects,
							children: /* @__PURE__ */ jsx(MultiSelect.List, { children: tags?.data?.map((tag) => /* @__PURE__ */ jsx(MultiSelect.Item, {
								value: String(tag.key),
								children: tag.name ?? tag.key
							}, String(tag.key))) })
						}) })]
					})]
				}),
				/* @__PURE__ */ jsx("div", {
					className: "flex flex-wrap items-center justify-end gap-2 max-md:flex-col",
					children: /* @__PURE__ */ jsx(Form.Button, {
						type: "button",
						size: ButtonSize.ICON_MD,
						label: auditButton.label.value,
						Icon: WandSparkles,
						variant: ButtonVariant.OUTLINE,
						color: ButtonColor.TEXT,
						className: "max-md:w-full",
						onClick: handleOnAuditFile,
						disabled: isSubmitting || isAuditing,
						isLoading: isAuditing
					})
				})
			]
		})
	});
};

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