import { jsx as e, jsxs as l, Fragment as f } from "react/jsx-runtime";
import { Typography as z, CircularProgress as M, IconButton as i, Box as a, Select as S, MenuItem as g, TextField as q, InputAdornment as A } from "@mui/material";
import { useMemoizedFn as n, useReactive as B, useCreation as F } from "ahooks";
import s from "lodash/noop";
import T from "is-url";
import { Icon as t } from "@iconify/react";
import j from "@iconify-icons/material-symbols/close-rounded";
import D from "@iconify-icons/material-symbols/check";
import O from "@iconify-icons/material-symbols/send-rounded";
import P from "@iconify-icons/material-symbols/edit-square-outline-rounded";
import U from "@iconify-icons/material-symbols/delete-outline-rounded";
import { translate as W } from "@arcblock/ux/lib/Locale/util";
import { useLocaleContext as E } from "@arcblock/ux/lib/Locale/context";
import { translations as L } from "../libs/locales.js";
function or({
  onTest: x = s,
  onDelete: h = s,
  onSave: b = s,
  onCancel: y = s,
  type: c = "slack",
  url: u = "",
  edit: C = !1
}) {
  const { locale: k } = E(), d = n((o, w = {}) => W(L, o, k, "en", w)), r = B({
    type: c || "slack",
    url: u || "",
    edit: C ?? !1,
    error: "",
    loading: !1
  }), m = n(() => r.url ? T(r.url) ? (r.error = "", !0) : (r.error = d("common.invalid"), !1) : (r.error = d("common.required"), !1)), I = n(() => {
    r.edit = !1, r.url = u || "", r.type = c || "slack", r.error = "", r.loading = !1, y();
  }), R = n(async (o) => {
    r.loading = !0, await x(o), r.loading = !1;
  }), p = n((o) => () => {
    m() && o({
      type: r.type,
      url: r.url
    });
  }), v = F(() => r.error ? /* @__PURE__ */ e(z, { component: "span", color: "error", children: r.error }) : r.edit ? r.loading ? /* @__PURE__ */ e(M, { size: 16 }) : /* @__PURE__ */ e(
    i,
    {
      size: "small",
      onClick: p(R),
      sx: {
        mr: -1
      },
      children: /* @__PURE__ */ e(t, { icon: O })
    }
  ) : null, [r.error, r.edit, r.loading]);
  return /* @__PURE__ */ l(
    a,
    {
      sx: {
        display: "flex",
        gap: 1.5,
        width: "100%",
        alignItems: {
          xs: "flex-start",
          md: "center"
        },
        flexDirection: {
          xs: "column",
          md: "row"
        }
      },
      children: [
        /* @__PURE__ */ l(
          S,
          {
            sx: {
              borderRadius: 1,
              "&.Mui-disabled": {
                backgroundColor: "grey.50"
              }
            },
            disabled: !r.edit || r.loading,
            size: "small",
            value: r.type,
            onChange: (o) => {
              r.type = o.target.value;
            },
            children: [
              /* @__PURE__ */ e(g, { value: "api", children: d("webhook.url") }),
              /* @__PURE__ */ e(g, { value: "slack", children: d("webhook.slack") })
            ]
          }
        ),
        /* @__PURE__ */ l(
          a,
          {
            sx: {
              display: "flex",
              alignItems: "center",
              gap: 0.5,
              width: "100%"
            },
            children: [
              /* @__PURE__ */ e(
                q,
                {
                  sx: {
                    flex: 1,
                    ".MuiInputBase-root": {
                      borderRadius: 1,
                      "&.Mui-disabled": {
                        backgroundColor: "grey.50"
                      }
                    }
                  },
                  disabled: !r.edit || r.loading,
                  fullWidth: !0,
                  size: "small",
                  required: !0,
                  value: r.url,
                  onChange: (o) => {
                    r.url = o.target.value, m();
                  },
                  error: !!r.error,
                  slotProps: {
                    input: {
                      endAdornment: /* @__PURE__ */ e(A, { position: "end", children: v })
                    }
                  }
                }
              ),
              /* @__PURE__ */ e(a, { sx: { display: "flex", gap: 0.5 }, children: r.edit ? /* @__PURE__ */ l(f, { children: [
                /* @__PURE__ */ e(
                  i,
                  {
                    color: "success",
                    onClick: p((...o) => {
                      b(...o), r.edit = !1;
                    }),
                    sx: {
                      borderRadius: 1,
                      border: "1px solid",
                      borderColor: "grey.200"
                    },
                    children: /* @__PURE__ */ e(t, { icon: D })
                  }
                ),
                /* @__PURE__ */ e(
                  i,
                  {
                    color: "error",
                    onClick: I,
                    sx: {
                      borderRadius: 1,
                      border: "1px solid",
                      borderColor: "grey.200"
                    },
                    children: /* @__PURE__ */ e(t, { icon: j })
                  }
                )
              ] }) : /* @__PURE__ */ l(f, { children: [
                /* @__PURE__ */ e(
                  i,
                  {
                    onClick: () => {
                      r.edit = !0;
                    },
                    sx: {
                      borderRadius: 1,
                      border: "1px solid",
                      borderColor: "grey.200"
                    },
                    children: /* @__PURE__ */ e(t, { icon: P })
                  }
                ),
                /* @__PURE__ */ e(
                  i,
                  {
                    color: "error",
                    onClick: () => {
                      h({
                        type: r.type,
                        url: r.url
                      });
                    },
                    sx: {
                      borderRadius: 1,
                      border: "1px solid",
                      borderColor: "grey.200"
                    },
                    children: /* @__PURE__ */ e(t, { icon: U })
                  }
                )
              ] }) })
            ]
          }
        )
      ]
    }
  );
}
export {
  or as default
};
