import { jsxs as m, jsx as o, Fragment as w } from "react/jsx-runtime";
import { useState as f } from "react";
import l from "prop-types";
import { useMemoizedFn as S, useReactive as B } from "ahooks";
import g from "lodash/noop";
import D from "@arcblock/ux/lib/Dialog";
import E from "@mui/material/CircularProgress";
import L from "@mui/material/DialogContentText";
import h from "@mui/material/Typography";
import y from "@mui/material/TextField";
import O from "@mui/material/Alert";
import W from "@arcblock/ux/lib/Toast";
import v from "@arcblock/ux/lib/Button";
import { translate as j } from "@arcblock/ux/lib/Locale/util";
import { formatAxiosError as k } from "../../UserCenter/libs/utils.js";
import z from "./use-org.js";
import A from "./locales.js";
function M({ onSuccess: C = g, onCancel: s = g, locale: T = "en" }) {
  const [i, c] = f(!1), [p, r] = f(""), { createOrg: b } = z(), t = S((e, a = {}) => j(A, e, T, "en", a)), n = B({
    name: "",
    description: ""
  }), x = async () => {
    const e = n.name.trim();
    if (!e) {
      r(t("nameEmpty"));
      return;
    }
    if (e.length > 25) {
      r(t("nameTooLong", { length: 25 }));
      return;
    }
    const a = n.description.trim();
    if (a.length > 255) {
      r(t("descriptionTooLong", { length: 25 }));
      return;
    }
    r(""), c(!0);
    try {
      await b({ name: e, description: a }), C();
    } catch (u) {
      console.error(u);
      const d = k(u);
      r(d), W.error(d);
    } finally {
      c(!1);
    }
  }, F = /* @__PURE__ */ m("div", { children: [
    /* @__PURE__ */ o(h, { component: "div", style: { marginTop: 16 }, children: /* @__PURE__ */ o(
      y,
      {
        label: t("mutate.name"),
        autoComplete: "off",
        variant: "outlined",
        name: "name",
        "data-cy": "mutate-org-input-name",
        fullWidth: !0,
        autoFocus: !0,
        value: n.name,
        onChange: (e) => {
          r(""), n.name = e.target.value;
        },
        disabled: i
      }
    ) }),
    /* @__PURE__ */ o(h, { component: "div", style: { marginTop: 16, marginBottom: 16 }, children: /* @__PURE__ */ o(
      y,
      {
        label: t("mutate.description"),
        autoComplete: "off",
        variant: "outlined",
        name: "description",
        "data-cy": "mutate-org-input-description",
        fullWidth: !0,
        value: n.description,
        onChange: (e) => {
          r(""), n.description = e.target.value;
        },
        disabled: i,
        multiline: !0,
        rows: 3
      }
    ) })
  ] });
  return /* @__PURE__ */ m(
    D,
    {
      title: t("mutate.title", { mode: t("create") }),
      fullWidth: !0,
      open: !0,
      onClose: s,
      showCloseButton: !1,
      actions: /* @__PURE__ */ m(w, { children: [
        /* @__PURE__ */ o(v, { onClick: s, color: "inherit", children: t("cancel") }),
        /* @__PURE__ */ m(
          v,
          {
            "data-cy": "mutate-org-confirm",
            onClick: x,
            color: "primary",
            disabled: i,
            variant: "contained",
            autoFocus: !0,
            children: [
              i && /* @__PURE__ */ o(E, { size: 16 }),
              t("create")
            ]
          }
        )
      ] }),
      children: [
        /* @__PURE__ */ o(L, { component: "div", children: F }),
        !!p && /* @__PURE__ */ o(O, { severity: "error", style: { width: "100%", margin: 0 }, children: p })
      ]
    }
  );
}
M.propTypes = {
  onSuccess: l.func,
  onCancel: l.func,
  locale: l.string
};
export {
  M as default
};
