import { jsxs as p, jsx as e } from "react/jsx-runtime";
import { Box as r, Tooltip as m, IconButton as c } from "@mui/material";
import f from "@iconify-icons/material-symbols/check";
import { Icon as d } from "@iconify/react";
import { useSize as h, useCreation as u } from "ahooks";
import { useRef as x } from "react";
import { DID as w } from "../DID/index.js";
import { mergeSx as z } from "../Util/style.js";
import I from "./app-icon.js";
import { DID_CONNECT_MEDIUM_WIDTH as N } from "../Util/constant.js";
function b({
  appInfo: o,
  active: s = !1,
  appLogo: l = null,
  sx: a = {}
}) {
  const t = x(null), i = h(t), n = u(() => i ? i.width < N - 50 : !0, [i, i?.width]);
  return /* @__PURE__ */ p(
    r,
    {
      ref: t,
      sx: z(
        {
          display: "flex",
          alignItems: "center",
          fontWeight: 600,
          color: "text.primary",
          "& .app-info-content": {
            paddingLeft: "8px",
            overflow: "hidden"
          },
          "& .app-info-name": {
            maxWidth: "100%",
            lineHeight: "normal",
            whiteSpace: "nowrap",
            overflow: "hidden",
            textOverflow: "ellipsis",
            fontSize: "12px",
            color: "text.primary"
          }
        },
        a
      ),
      children: [
        l || /* @__PURE__ */ e(
          r,
          {
            sx: {
              borderRadius: 1,
              overflow: "hidden",
              fontSize: 0
            },
            children: /* @__PURE__ */ e(I, { appInfo: o })
          }
        ),
        /* @__PURE__ */ p(r, { className: "app-info-content", children: [
          /* @__PURE__ */ e(m, { title: o.appName, placement: "top", children: /* @__PURE__ */ e(r, { className: "app-info-name", children: o.appName }) }),
          o.appPid && /* @__PURE__ */ e(
            w,
            {
              className: "app-info-did",
              did: o.appPid,
              sx: { fontSize: "10px !important" },
              copyable: !1,
              startChars: n ? 6 : 8,
              endChars: n ? 6 : 8,
              size: 12
            }
          )
        ] }),
        s ? /* @__PURE__ */ e(c, { size: "small", color: "success", children: /* @__PURE__ */ e(d, { icon: f, color: "success" }) }) : null
      ]
    }
  );
}
export {
  b as default
};
