import { jsx as n, jsxs as C } from "react/jsx-runtime"; import { Input as P, Checkbox as ee, Textarea as re, RadioGroup as te, HStack as le, Radio as ne, Modal as oe, ModalOverlay as ie, ModalContent as ce, ModalHeader as ue, ModalCloseButton as se, ModalBody as ae, VStack as de, SimpleGrid as fe, ModalFooter as be, Button as G, FormControl as me, FormLabel as ve, FormErrorMessage as xe, useDisclosure as pe } from "@chakra-ui/react"; import { Select as Fe } from "chakra-react-select"; import { useContext as he, useMemo as p, useRef as ke, useEffect as H, createContext as ge, useState as Se, useCallback as I } from "react"; import { Controller as z, useForm as ye, useWatch as Re } from "react-hook-form"; const Me = {}, M = { create: { titlePrefix: "افزودن", submitText: "ثبت" }, edit: { titlePrefix: "ویرایش", submitText: "ویرایش" } }, U = ge(null); function Ce({ item: e, mode: r }) { return e ? [r, e.rowId, e.entityId, e.id].filter(Boolean).join("-") : r; } function F({ required: e, validate: r, rules: t }) { const l = { ...t ?? {} }; return e && (l.required = typeof e == "string" ? e : "این فیلد الزامی است."), r && (l.validate = r), l; } function x() { const e = he(U); if (!e) throw new Error("Field باید داخل FormModal استفاده شود."); return e; } function _(e = []) { return e.map((r, t) => { if (typeof r != "object" || r === null) { const o = String(r); return { key: o, label: o, value: o, disabled: !1 }; } const l = r.value ?? r.id; return { key: String(r.key ?? l ?? t), label: r.label ?? r.name ?? l, value: String(l), disabled: !!r.disabled }; }); } function h({ name: e, label: r, showWhen: t, children: l }) { var s; const { errors: o, control: u } = x(), c = Re({ control: u, name: t == null ? void 0 : t.name }); return p(() => t ? typeof t == "function" ? t({ value: c }) : c === t.value : !0, [t, c]) ? /* @__PURE__ */ C(me, { isInvalid: !!o[e], children: [ r && /* @__PURE__ */ n(ve, { fontSize: "sm", fontWeight: "bold", children: r }), l, /* @__PURE__ */ n(xe, { children: (s = o[e]) == null ? void 0 : s.message }) ] }) : null; } function Ve({ name: e, label: r, required: t, validate: l, rules: o, showWhen: u, placeholder: c, ...i }) { const { register: s } = x(); return /* @__PURE__ */ n(h, { name: e, label: r, showWhen: u, children: /* @__PURE__ */ n( P, { borderRadius: "xl", placeholder: c, ...s(e, F({ required: t, validate: l, rules: o })), ...i } ) }); } function Be({ name: e, label: r, required: t, validate: l, rules: o, showWhen: u, placeholder: c, ...i }) { const { register: s } = x(); return /* @__PURE__ */ n(h, { name: e, label: r, showWhen: u, children: /* @__PURE__ */ n( re, { borderRadius: "xl", placeholder: c, ...s(e, F({ required: t, validate: l, rules: o })), ...i } ) }); } function Ee({ name: e, label: r, required: t, validate: l, rules: o, showWhen: u, placeholder: c = "انتخاب کنید", options: i = [], onChange: s, isClearable: f = !0, ...m }) { const { control: b, setValue: a } = x(), S = p(() => _(i), [i]); return /* @__PURE__ */ n(h, { name: e, label: r, showWhen: u, children: /* @__PURE__ */ n( z, { name: e, control: b, rules: F({ required: t, validate: l, rules: o }), render: ({ field: g }) => { const V = S.find((d) => d.value === g.value) ?? null; return /* @__PURE__ */ n( Fe, { placeholder: c, options: S, value: V, isClearable: f, isRtl: !0, menuPlacement: "auto", menuPosition: "fixed", selectedOptionStyle: "check", chakraStyles: { control: (d) => ({ ...d, borderRadius: "var(--chakra-radii-xl)" }), menu: (d) => ({ ...d, zIndex: 2e3 }) }, onChange: (d) => { const y = (d == null ? void 0 : d.value) ?? ""; g.onChange(y), s == null || s({ value: y, option: d, setValue: a }); }, ...m } ); } } ) }); } function Ie({ name: e, label: r, required: t, validate: l, rules: o, showWhen: u, options: c = [], onChange: i }) { const { control: s, setValue: f } = x(), m = _(c); return /* @__PURE__ */ n(h, { name: e, label: r, showWhen: u, children: /* @__PURE__ */ n( z, { name: e, control: s, rules: F({ required: t, validate: l, rules: o }), render: ({ field: b }) => /* @__PURE__ */ n( te, { value: b.value, onChange: (a) => { b.onChange(a), i == null || i({ value: a, setValue: f }); }, children: /* @__PURE__ */ n(le, { pt: "8px", spacing: 3, children: m.map((a) => /* @__PURE__ */ n( ne, { value: a.value, isDisabled: a.disabled, children: a.label }, a.value )) }) } ) } ) }); } function Pe({ name: e, label: r, required: t, validate: l, rules: o, showWhen: u, children: c, onChange: i }) { const { control: s, setValue: f } = x(); return /* @__PURE__ */ n(h, { name: e, label: r, showWhen: u, children: /* @__PURE__ */ n( z, { name: e, control: s, rules: F({ required: t, validate: l, rules: o }), render: ({ field: m }) => /* @__PURE__ */ n( ee, { isChecked: !!m.value, onChange: (b) => { const a = b.target.checked; m.onChange(a), i == null || i({ value: a, setValue: f }); }, children: c ?? r } ) } ) }); } function ze({ name: e, label: r, required: t, validate: l, rules: o, showWhen: u, ...c }) { const { register: i } = x(); return /* @__PURE__ */ n(h, { name: e, label: r, showWhen: u, children: /* @__PURE__ */ n( P, { type: "file", borderRadius: "xl", ...i(e, F({ required: t, validate: l, rules: o })), ...c } ) }); } function De({ name: e, label: r, required: t, validate: l, rules: o, showWhen: u, ...c }) { const { register: i } = x(); return /* @__PURE__ */ n(h, { name: e, label: r, showWhen: u, children: /* @__PURE__ */ n( P, { type: "date", borderRadius: "xl", ...i(e, F({ required: t, validate: l, rules: o })), ...c } ) }); } const Ae = { Input: Ve, Select: Ee, Radio: Ie, Textarea: Be, Check: Pe, Filepicker: ze, Datepicker: De, useForm: x }; function Ge({ isOpen: e, close: r, item: t = null, entityName: l = "آیتم", title: o, createTitle: u, editTitle: c, submitText: i, createSubmitText: s, editSubmitText: f, defaultValues: m = Me, getDefaultValues: b, resetKey: a, onSubmit: S, transformValues: g, children: V, isLoading: d = !1, size: y = "lg", columns: Y = { base: 1, md: 2 } }) { const v = !!t, k = v ? "edit" : "create", w = p(() => o || (v ? c ?? `${M.edit.titlePrefix} ${l}` : u ?? `${M.create.titlePrefix} ${l}`), [o, c, u, l, v]), J = p(() => i || (v ? f ?? M.edit.submitText : s ?? M.create.submitText), [i, f, s, v]), R = p(() => typeof b == "function" ? b({ item: t, mode: k, isEdit: v }) : m, [b, m, t, k, v]), B = ke(R); H(() => { B.current = R; }, [R]); const K = p(() => a || Ce({ item: t, mode: k }), [a, t, k]), Q = ye({ defaultValues: R }), { handleSubmit: X, reset: E, register: D, control: O, setValue: L, watch: T, formState: { isSubmitting: Z, errors: j } } = Q; H(() => { e && E(B.current); }, [e, K, E]); const $ = () => { E(B.current), r(); }, q = X(async (A) => { const W = typeof g == "function" ? g({ values: A, item: t, mode: k, isEdit: v }) : A; await S({ values: W, item: t, mode: k, isEdit: v }); }), N = p( () => ({ register: D, control: O, setValue: L, watch: T, errors: j }), [D, O, L, T, j] ); return /* @__PURE__ */ C(oe, { isOpen: e, onClose: $, isCentered: !0, size: y, children: [ /* @__PURE__ */ n(ie, { backdropFilter: "blur(6px)" }), /* @__PURE__ */ C( ce, { as: "form", onSubmit: q, borderRadius: "2xl", overflow: "visible", children: [ /* @__PURE__ */ n( ue, { bgGradient: "linear(to-l, blue.600, facebook.500)", color: "white", fontSize: "md", fontWeight: "black", children: w } ), /* @__PURE__ */ n(se, { color: "white" }), /* @__PURE__ */ n(ae, { py: 5, children: /* @__PURE__ */ n(U.Provider, { value: N, children: /* @__PURE__ */ n(de, { spacing: 4, alignItems: "stretch", children: /* @__PURE__ */ n(fe, { columns: Y, spacing: 4, children: V }) }) }) }), /* @__PURE__ */ C(be, { gap: 2, bg: "gray.50", children: [ /* @__PURE__ */ n(G, { type: "button", variant: "ghost", onClick: $, children: "انصراف" }), /* @__PURE__ */ n( G, { type: "submit", colorScheme: "blue", borderRadius: "xl", isLoading: Z || d, children: J } ) ] }) ] } ) ] }); } function He() { const { isOpen: e, onOpen: r, onClose: t } = pe(), [l, o] = Se(null), u = I(() => { o(null), r(); }, [r]), c = I( (f) => { o(f), r(); }, [r] ), i = I(() => { o(null), t(); }, [t]), s = !!l; return p( () => ({ isOpen: e, item: l, isEdit: s, isCreate: !s, openCreate: u, openEdit: c, close: i }), [e, l, s, u, c, i] ); } export { Ae as Field, Ge as FormModal, He as useFormModal };