uikit/dist/form.js

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
};