'use client';

import { ButtonColor } from "../../Button/Button.mjs";
import { useSession } from "../../../hooks/useAuth/useSession.mjs";
import { useAddDictionary, useGetProjects } from "../../../hooks/reactQuery.mjs";
import { MultiSelect } from "../../Select/Multiselect.mjs";
import { useForm } from "../../Form/FormBase.mjs";
import { Form } from "../../Form/Form.mjs";
import { useDictionarySchema } from "./useDictionaryFormSchema.mjs";
import { jsx, jsxs } from "react/jsx-runtime";
import { useIntlayer } from "react-intlayer";

//#region src/components/DictionaryFieldEditor/DictionaryCreationForm/DictionaryCreationForm.tsx
const DictionaryCreationForm = ({ onDictionaryCreated }) => {
	const { session } = useSession();
	const { project } = session ?? {};
	const { mutate: addDictionary, isPending } = useAddDictionary();
	const { data: projectsData } = useGetProjects();
	const DictionarySchema = useDictionarySchema(String(project?.id));
	const { form, isSubmitting } = useForm(DictionarySchema);
	const { keyInput, createDictionaryButton, projectInput } = useIntlayer("dictionary-form");
	const onSubmitSuccess = (data) => {
		addDictionary({ dictionary: data }, { onSuccess: () => {
			onDictionaryCreated?.();
		} });
	};
	return /* @__PURE__ */ jsxs(Form, {
		schema: DictionarySchema,
		onSubmitSuccess,
		className: "m-auto w-full max-w-[400px]",
		...form,
		children: [
			/* @__PURE__ */ jsx(Form.Input, {
				name: "key",
				label: keyInput.label.value,
				placeholder: keyInput.placeholder.value,
				isRequired: true
			}),
			/* @__PURE__ */ jsxs(Form.MultiSelect, {
				name: "projectIds",
				label: projectInput.label.value,
				children: [/* @__PURE__ */ jsx(MultiSelect.Trigger, {
					getBadgeValue: (value) => projectsData?.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(MultiSelect.List, { children: projectsData?.data?.map((project$1) => /* @__PURE__ */ jsx(MultiSelect.Item, {
					value: String(project$1.id),
					children: project$1.name
				}, String(project$1.id))) }) })]
			}),
			/* @__PURE__ */ jsx(Form.Button, {
				className: "mt-12 ml-auto",
				type: "submit",
				color: ButtonColor.TEXT,
				isLoading: isSubmitting || isPending,
				label: createDictionaryButton.ariaLabel.value,
				isFullWidth: true,
				children: createDictionaryButton.text
			})
		]
	});
};

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