import { jsx as o, jsxs as h } from "react/jsx-runtime";
import { Alert as z, Box as w, CircularProgress as R, Typography as A, Stack as T } from "@mui/material";
import { useMemoizedFn as c, useReactive as j, useRequest as F, useCreation as v } from "ahooks";
import { Icon as B } from "@iconify/react";
import E from "@iconify-icons/material-symbols/add-rounded";
import G from "@arcblock/ux/lib/Switch";
import L from "@arcblock/ux/lib/Button";
import f from "@arcblock/ux/lib/Toast";
import { getWalletDid as C } from "@arcblock/ux/lib/SessionUser/libs/utils";
import { translate as M } from "@arcblock/ux/lib/Locale/util";
import { useLocaleContext as P } from "@arcblock/ux/lib/Locale/context";
import U from "@arcblock/ux/lib/DID";
import { translations as _ } from "../libs/locales.js";
import b from "./webhook-item.js";
import { formatAxiosError as S } from "../libs/utils.js";
import { client as g } from "../../libs/client.js";
function y({
  title: i = void 0,
  description: n = void 0,
  value: m,
  onChange: a,
  isMobile: s
}) {
  const r = c((l) => {
    l.stopPropagation();
  });
  return /* @__PURE__ */ h(
    w,
    {
      sx: {
        display: "flex",
        alignItems: "center",
        gap: 1
      },
      children: [
        /* @__PURE__ */ o(G, { checked: m, size: "small", onChange: a }),
        /* @__PURE__ */ h(
          A,
          {
            component: "div",
            onClick: r,
            sx: {
              color: "text.primary",
              fontSize: 14,
              display: "flex",
              flexWrap: s ? "wrap" : "nowrap",
              columnGap: 1,
              flex: 1,
              whiteSpace: s ? "normal" : "nowrap"
            },
            children: [
              i,
              n
            ]
          }
        )
      ]
    }
  );
}
function ie({ user: i, isMobile: n }) {
  const { locale: m } = P(), a = c((e, t = {}) => M(_, e, m, "en", t)), s = j({
    showAdd: !1
  }), r = F(
    async () => await g.user.getUserNotificationConfig(),
    {
      refreshDeps: [i],
      loadingDelay: 300
    }
  ), l = v(() => ({
    wallet: !0,
    email: !0,
    phone: !1,
    push: !0,
    ...r?.data?.notifications || {}
  }), [r?.data?.notifications]), p = v(() => r?.data?.webhooks || [], [r?.data?.webhooks]), u = c(async (e) => {
    try {
      await g.user.saveUserNotificationConfig(e), f.success(a("saveSuccess")), r.run();
    } catch (t) {
      f.error(S(t));
    }
  }), x = c(async (e, t) => {
    await u({
      notifications: {
        [e]: t
      }
    });
  }), k = async (e) => {
    try {
      await g.user.testNotificationWebhook(e), f.success(a("webhookTested"));
    } catch (t) {
      f.error(S(t));
    }
  }, D = c(async (e) => {
    await u({
      webhooks: p.filter((t, d) => d !== e)
    });
  }), I = c(async (e, t) => {
    await u({
      webhooks: p.map((d, N) => N === e ? t : d)
    });
  }), W = c(async (e) => {
    await u({
      webhooks: [...p, e]
    }), s.showAdd = !1;
  });
  return r.error ? /* @__PURE__ */ o(z, { severity: "error", children: r.error.message }) : r.loading || !r.data ? /* @__PURE__ */ o(
    w,
    {
      sx: {
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        height: "100px"
      },
      children: /* @__PURE__ */ o(R, {})
    }
  ) : /* @__PURE__ */ h(w, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: [
    /* @__PURE__ */ h(
      w,
      {
        sx: {
          display: "flex",
          flexDirection: "column",
          gap: 1,
          alignItems: "start",
          ".MuiFormControlLabel-root": {
            gap: 1,
            m: 0,
            flexDirection: {
              xs: "row-reverse",
              md: "row"
            },
            width: {
              xs: "100%",
              md: "unset"
            }
          },
          ".MuiSwitch-track": {
            borderRadius: "100vw"
          },
          ".MuiSwitch-thumb": {
            borderRadius: "100%"
          },
          ".MuiSwitch-root.MuiSwitch-sizeSmall": {
            height: "20px",
            width: "36px",
            ".MuiSwitch-thumb": {
              width: "16px",
              height: "16px"
            }
          }
        },
        children: [
          /* @__PURE__ */ o(
            y,
            {
              value: l.wallet,
              isMobile: n,
              title: a("walletNotification"),
              onChange: (e) => x("wallet", e.target.checked),
              description: C(i) && /* @__PURE__ */ o(
                U,
                {
                  did: C(i),
                  showQrcode: !1,
                  showAvatar: !n,
                  copyable: !0,
                  compact: !0,
                  responsive: !0,
                  locale: m,
                  startChars: n ? 2 : 6
                }
              )
            }
          ),
          /* @__PURE__ */ o(
            y,
            {
              value: l.email,
              isMobile: n,
              onChange: (e) => x("email", e.target.checked),
              title: a("emailNotification"),
              description: i?.email && /* @__PURE__ */ o(
                A,
                {
                  component: "span",
                  sx: {
                    color: "text.secondary",
                    fontSize: 13
                  },
                  children: i?.email
                }
              )
            }
          ),
          /* @__PURE__ */ o(
            y,
            {
              isMobile: n,
              value: l.push,
              title: a("pushNotification"),
              onChange: (e) => x("push", e.target.checked)
            }
          )
        ]
      }
    ),
    /* @__PURE__ */ h(
      T,
      {
        spacing: 1.5,
        useFlexGap: !0,
        direction: "column",
        sx: {
          alignItems: "start"
        },
        children: [
          p.map((e, t) => /* @__PURE__ */ o(
            b,
            {
              onTest: k,
              onDelete: () => D(t),
              onSave: (...d) => I(t, ...d),
              type: e.type,
              url: e.url,
              edit: !1
            },
            `${t}_${e.url}`
          )),
          s.showAdd && /* @__PURE__ */ o(
            b,
            {
              onTest: k,
              onCancel: () => {
                s.showAdd = !1;
              },
              onSave: (...e) => W(...e),
              edit: !0
            },
            "add"
          ),
          /* @__PURE__ */ o(
            L,
            {
              variant: "outlined",
              size: "small",
              sx: {
                color: "text.primary",
                borderColor: "divider",
                "&:hover": {
                  borderColor: "divider"
                },
                py: 0.5,
                borderRadius: 1
              },
              startIcon: /* @__PURE__ */ o(B, { icon: E }),
              onClick: () => {
                s.showAdd = !0;
              },
              children: a("addWebhook")
            }
          )
        ]
      }
    )
  ] });
}
export {
  ie as default
};
