import { jsxs as u, Fragment as c, jsx as e } from "react/jsx-runtime";
import a from "prop-types";
import { Box as l, Popover as P } from "@mui/material";
import { useRef as O } from "react";
import A from "lodash/isEmpty";
import b from "lodash/isNull";
import g from "lodash/isUndefined";
import { useCreation as f, useMount as y, useReactive as S } from "ahooks";
import { mergeSx as B } from "@arcblock/ux/lib/Util/style";
import { AppInfoItem as E, AppIcon as R } from "@arcblock/ux/lib/DIDConnect";
import { useStateContext as C } from "../contexts/state.js";
function m({ appInfo: r }) {
  const i = O(null), o = S({
    hoverOnButton: !1,
    hoverOnPopover: !1
  }), n = f(() => o.hoverOnButton || o.hoverOnPopover, [o.hoverOnButton, o.hoverOnPopover]);
  return /* @__PURE__ */ u(c, { children: [
    /* @__PURE__ */ e(
      l,
      {
        component: "span",
        ref: i,
        sx: {
          color: "secondary.main",
          cursor: "help"
        },
        onClick: () => {
          o.hoverOnButton = !0;
        },
        onMouseEnter: () => {
          o.hoverOnButton = !0;
        },
        onMouseLeave: () => {
          setTimeout(() => {
            o.hoverOnButton = !1;
          }, 200);
        },
        children: r.appName
      }
    ),
    /* @__PURE__ */ e(
      P,
      {
        open: n,
        sx: {
          pointerEvents: "none"
        },
        slotProps: {
          paper: {
            variant: "outlined",
            sx: {
              border: 0,
              boxShadow: ({ palette: t }) => `0px 4px 8px 0px ${t.grey[100]}, 0px 0px 0px 1px ${t.grey[100]}`,
              py: 1,
              px: 1.5,
              borderRadius: 1,
              transform: "translateY(-6px) !important"
            }
          }
        },
        anchorEl: i.current,
        anchorOrigin: {
          vertical: "top",
          horizontal: "center"
        },
        transformOrigin: {
          vertical: "bottom",
          horizontal: "center"
        },
        onClose: () => {
          o.open = !1;
        },
        disableRestoreFocus: !0,
        children: /* @__PURE__ */ e(
          l,
          {
            component: "span",
            sx: {
              pointerEvents: "auto"
            },
            onMouseEnter: () => {
              o.hoverOnPopover = !0;
            },
            onMouseLeave: () => {
              o.hoverOnPopover = !1;
            },
            children: /* @__PURE__ */ e(E, { appInfo: r, appLogo: /* @__PURE__ */ e(R, { appInfo: r }) })
          }
        )
      }
    )
  ] });
}
m.propTypes = {
  appInfo: a.object.isRequired
};
function M({ disableSwitchApp: r = !1, sx: i = null }) {
  const { appInfoList: o, extraParams: n, connectState: t, blocklet: d, locale: h } = C(), p = f(() => o.find((s) => g(n?.sourceAppPid) ? !0 : b(s.sourceAppPid) ? s.appPid === d?.appPid : s.sourceAppPid === n?.sourceAppPid), [n?.sourceAppPid, o]), v = !r && o.length > 1;
  y(() => {
    d?.appPid === p?.appPid ? t.sourceAppPid = null : t.sourceAppPid = p?.appPid;
  });
  const x = f(() => h === "zh" ? /* @__PURE__ */ u(c, { children: [
    "您正在使用 ",
    /* @__PURE__ */ e(m, { appInfo: p, appInfoList: o }),
    " 账户来连接站点"
  ] }) : /* @__PURE__ */ u(c, { children: [
    "You're using ",
    /* @__PURE__ */ e(m, { appInfo: p }),
    " account for site access"
  ] }), [h, p, o, v]);
  return A(o) ? null : /* @__PURE__ */ e(
    l,
    {
      sx: B(
        {
          fontSize: "13px",
          color: "text.secondary",
          lineHeight: 1.5
        },
        i
      ),
      children: x
    }
  );
}
M.propTypes = {
  disableSwitchApp: a.bool,
  sx: a.object
};
export {
  M as default
};
