import { jsx as o, jsxs as I } from "react/jsx-runtime";
import "@fontsource/ubuntu-mono/400.css";
import { Check as P } from "@mui/icons-material";
import { Box as l, Tooltip as h } from "@mui/material";
import B from "copy-to-clipboard";
import C from "lodash/noop";
import E from "@arcblock/icons/lib/Copy";
import { useState as F, useRef as w, useImperativeHandle as S } from "react";
import { styled as A } from "../Theme/index.js";
import { getFontSize as H } from "../Util/index.js";
import L from "./compact-text.js";
const i = {
  en: {
    copy: "Click To Copy",
    copied: "Copied!"
  },
  zh: {
    copy: "点击复制",
    copied: "已复制!"
  }
};
function Z({
  ref: e = void 0,
  ...g
}) {
  const {
    component: v = "span",
    size: b = 0,
    copyable: t = !0,
    showCopyButtonInTooltip: z = !1,
    children: a = null,
    content: $ = "",
    prepend: k = null,
    append: N = null,
    compact: d = !1,
    startChars: T = 6,
    endChars: D = 6,
    locale: R = "en",
    ...j
  } = g;
  let r = R;
  i[r] || (r = "en");
  const [n, m] = F(!1), u = w(null), c = w(null), f = () => {
    B($ || u.current?.textContent || ""), m(!0), setTimeout(() => {
      m(!1);
    }, 1500);
  }, p = (s) => {
    s.stopPropagation(), s.preventDefault(), f();
  };
  S(
    e,
    () => new Proxy(
      {
        copy: f,
        getEl: () => c.current
      },
      {
        get(s, x) {
          return s[x] || c.current?.[x];
        }
      }
    )
  );
  let y = null;
  return t && (y = /* @__PURE__ */ o("span", { className: "did-address-copy-wrapper", title: n ? "" : i[r].copy, children: n ? /* @__PURE__ */ o(h, { title: i[r].copied, placement: "bottom", arrow: !0, open: n, children: /* @__PURE__ */ o(P, { className: "did-address-copy", sx: { color: "success.main" } }) }) : (
    /* title prop 直接加在 icon 上不生效 */
    /* @__PURE__ */ o(E, { className: "did-address-copy", width: "1em", height: "1em", onClick: p })
  ) })), /* @__PURE__ */ I(M, { as: v, size: b, ...j, ref: c, children: [
    k,
    /* @__PURE__ */ o(l, { sx: { display: "none" }, ref: u, children: a }),
    /* @__PURE__ */ o(h, { title: t ? "" : i[r].copied, placement: "bottom", arrow: !0, open: n, children: d ? /* @__PURE__ */ o(
      l,
      {
        component: "span",
        className: "did-address-text",
        sx: {
          cursor: t ? "unset" : "pointer"
        },
        onDoubleClick: t ? C : p,
        children: /* @__PURE__ */ o(L, { startChars: T, endChars: D, showCopyButtonInTooltip: z, children: a })
      }
    ) : /* @__PURE__ */ o(
      l,
      {
        component: "span",
        className: "did-address-text did-address-truncate",
        sx: {
          display: d ? "none" : "inline",
          cursor: t ? "unset" : "pointer"
        },
        onDoubleClick: t ? C : p,
        children: a
      }
    ) }),
    y,
    N
  ] });
}
const M = A(l, { shouldForwardProp: (e) => e !== "inline" })`
  font-family: 'Ubuntu Mono', monospace;
  && {
    display: ${({ inline: e }) => e ? "inline-flex" : "flex"};
    align-items: center;
    max-width: 100%;
    overflow: hidden;
    color: #ccc;
    font-size: ${(e) => H(e.size)};
    font-weight: 400;

    svg {
      fill: currentColor;
    }
  }

  .did-address-text {
    color: ${({ theme: e }) => e.palette.text.secondary};
  }
  /* truncate string with ellipsis */
  .did-address-truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .did-address-copy-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1em;
    height: 1em;
    margin-left: 8px;
  }
  .did-address-copy {
    flex: 0 0 auto;
    font-size: 1em;
    color: ${({ theme: e }) => e.palette.text.secondary};
    cursor: pointer;
  }

  /* link */
  a {
    color: ${({ theme: e }) => e.palette.text.secondary};
  }
  &:hover a {
    color: ${({ theme: e }) => e.palette.text.primary};
    text-decoration: underline;
  }
`;
export {
  Z as default
};
