import { jsxs as s, Fragment as P, jsx as n } from "react/jsx-runtime";
import { Icon as m } from "@iconify/react";
import { Box as c, Tooltip as y, Typography as I } from "@mui/material";
import E from "@iconify-icons/material-symbols/link-rounded";
import z from "@arcblock/ux/lib/Button";
import G from "@arcblock/ux/lib/Avatar";
import { useReactive as H, useMemoizedFn as k, useCreation as v } from "ahooks";
import { translate as M } from "@arcblock/ux/lib/Locale/util";
import { useConfirm as D } from "@arcblock/ux/lib/Dialog";
import { useLocaleContext as F } from "@arcblock/ux/lib/Locale/context";
import W from "@iconify-icons/material-symbols/mail-outline-rounded";
import N from "@iconify-icons/material-symbols/info-outline-rounded";
import K from "@iconify-icons/material-symbols/passkey";
import V from "@iconify-icons/material-symbols/wallet-sharp";
import Y from "@iconify-icons/logos/apple";
import j from "@iconify-icons/logos/github-icon";
import $ from "@iconify-icons/logos/google-icon";
import { SessionContext as q } from "@arcblock/did-connect-react/lib/Session";
import { use as J } from "react";
import Q from "lodash/pick";
import { getFederatedEnabled as X, getMaster as Z } from "@arcblock/ux/lib/Util/federated";
import { LOGIN_PROVIDER as a, LOGIN_PROVIDER_NAME as oo } from "@arcblock/ux/lib/Util/constant";
import { useStateContext as ro } from "@arcblock/did-connect-react/lib/Connect/contexts/state";
import { translations as no } from "../../libs/locales.js";
function Ao({
  item: o
}) {
  const { blocklet: w } = ro(), { confirmApi: f, confirmHolder: C } = D(), p = H({
    loading: !1
  }), { locale: B } = F(), e = k((r, t = {}) => M(no, r, B, "en", t)), { session: l } = J(q), { bindOAuth: S, unbindOAuth: A, setBaseUrl: u, baseUrl: L } = l.useOAuth(), { disconnectPasskey: _, setTargetAppPid: h } = l.usePasskey(), O = {
    // email: MailOutlineRoundedIcon,
    [a.AUTH0]: W,
    [a.APPLE]: Y,
    [a.GITHUB]: j,
    [a.GOOGLE]: $,
    [a.PASSKEY]: K,
    [a.WALLET]: V
  }, R = v(() => O[o?.provider], [o?.provider]), d = v(() => oo[o?.provider] || "unknown", [o?.provider]), T = k(async () => {
    if (o?.provider === a.PASSKEY) {
      await new Promise((r, t) => {
        f.open({
          title: e("thirdPartyLogin.disconnectPasskey", { name: d }),
          content: e("thirdPartyLogin.disconnectPasskeyDescription", { name: d }),
          confirmButtonText: e("common.confirm"),
          confirmButtonProps: {
            color: "error"
          },
          cancelButtonText: e("common.cancel"),
          onConfirm(i) {
            _({ session: l, connectedAccount: o }).then(r).catch(t), i();
          },
          // @ts-ignore
          onCancel: r
        });
      });
      return;
    }
    try {
      p.loading = !0, await new Promise((r, t) => {
        if (o?._bind)
          f.open({
            title: e("thirdPartyLogin.confirmUnbind", { name: d }),
            content: e("thirdPartyLogin.confirmUnbindDescription", { name: d }),
            confirmButtonText: e("common.confirm"),
            confirmButtonProps: {
              color: "error"
            },
            cancelButtonText: e("common.cancel"),
            onConfirm(i) {
              A({
                session: l,
                connectedAccount: {
                  ...Q(o, ["did", "pk"]),
                  showProvider: o.provider,
                  provider: o._rawProvider
                }
              }).then(r).catch(t), i();
            },
            // @ts-ignore
            onCancel: r
          });
        else {
          const i = L, g = window?.blocklet;
          let x = "/";
          const U = X(g), b = Z(g);
          U && b?.appPid && l?.user?.sourceAppPid && (x = b.appUrl), u(x), h(w?.appPid), S({
            session: l,
            oauthItem: {
              ...o,
              provider: o._rawProvider
            }
          }).then(r).catch(t).finally(() => {
            u(i), h();
          });
        }
      });
    } catch (r) {
      console.error(`Failed to ${o?._bind ? "unbind" : "bind"} oauth account`, r);
    } finally {
      p.loading = !1;
    }
  });
  return /* @__PURE__ */ s(P, { children: [
    /* @__PURE__ */ s(
      c,
      {
        sx: {
          borderRadius: 1,
          border: "1px solid",
          borderColor: "divider",
          backgroundColor: "grey.50",
          display: "flex",
          alignItems: "center",
          py: 1,
          px: 1.5,
          gap: 0.75,
          fontSize: "14px",
          lineHeight: 1,
          overflow: "hidden"
        },
        children: [
          /* @__PURE__ */ n(
            c,
            {
              component: m,
              icon: R,
              fill: "currentColor",
              sx: {
                width: "1em",
                height: "1em",
                flexShrink: 0,
                fontSize: 16,
                // githubIcon 不支持变色，dark 模式做一个反色处理
                filter: ({ palette: r }) => o?.provider === a.GITHUB && r.mode === "dark" ? "invert(1)" : "none"
              }
            }
          ),
          /* @__PURE__ */ n(
            c,
            {
              sx: {
                flex: 1
              },
              children: d
            }
          ),
          /* @__PURE__ */ s(
            c,
            {
              sx: {
                display: "flex",
                alignItems: "center",
                gap: 0.5
              },
              children: [
                /* @__PURE__ */ n(
                  c,
                  {
                    sx: {
                      flex: 1,
                      textOverflow: "ellipsis",
                      overflow: "hidden",
                      lineHeight: "normal"
                    },
                    children: o.userInfo?.email || o.did
                  }
                ),
                o.userInfo?.name ? /* @__PURE__ */ n(
                  y,
                  {
                    title: /* @__PURE__ */ n(P, { children: /* @__PURE__ */ s(c, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
                      /* @__PURE__ */ n(G, { size: 36, variant: "circle", shape: "circle", src: o.userInfo?.picture, did: o.did }),
                      /* @__PURE__ */ s(c, { children: [
                        /* @__PURE__ */ n(
                          I,
                          {
                            sx: {
                              whiteSpace: "normal",
                              wordBreak: "break-all",
                              fontSize: "0.9rem"
                            },
                            children: o.userInfo?.name
                          }
                        ),
                        /* @__PURE__ */ n(
                          I,
                          {
                            sx: {
                              whiteSpace: "normal",
                              wordBreak: "break-all",
                              fontSize: "0.9rem"
                            },
                            children: o.userInfo?.email
                          }
                        )
                      ] })
                    ] }) }),
                    children: /* @__PURE__ */ n(
                      c,
                      {
                        component: m,
                        icon: N,
                        sx: {
                          color: "text.secondary",
                          fontSize: 16,
                          cursor: "pointer",
                          flexShrink: 0
                        }
                      }
                    )
                  }
                ) : null
              ]
            }
          )
        ]
      }
    ),
    /* @__PURE__ */ n(y, { title: o._mainProvider ? e("thirdPartyLogin.mainProviderCantRemove") : "", children: /* @__PURE__ */ n(c, { children: /* @__PURE__ */ n(
      z,
      {
        variant: "outlined",
        size: "small",
        sx: (r) => {
          const t = r.palette.error.main, i = r.palette.primary.main;
          return {
            color: o?._bind ? t : i,
            borderColor: o?._bind ? t : i,
            backgroundColor: "background.default",
            "&:hover": {
              borderColor: o?._bind ? t : i,
              backgroundColor: "action.hover"
            },
            py: 0.5,
            borderRadius: 1,
            fontWeight: 500,
            whiteSpace: "nowrap"
          };
        },
        fullWidth: !0,
        startIcon: p.loading ? null : /* @__PURE__ */ n(m, { icon: E }),
        onClick: T,
        disabled: o._mainProvider,
        loading: p.loading,
        children: o?._bind ? e("thirdPartyLogin.disconnect") : e("thirdPartyLogin.connect")
      }
    ) }) }),
    C
  ] });
}
export {
  Ao as default
};
