uikit/dist/form.js

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