"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
module.exports = TxLink;
var _jsxRuntime = require("react/jsx-runtime");
var _context = require("@arcblock/ux/lib/Locale/context");
var _iconsMaterial = require("@mui/icons-material");
var _material = require("@mui/material");
var _system = require("@mui/system");
var _util = require("../../libs/util");
function TxLink({
  details,
  method,
  mode = "dashboard",
  align = "left",
  size = 20
}) {
  const {
    t
  } = (0, _context.useLocaleContext)();
  if (!details || mode === "customer" && method.type === "stripe") {
    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
      component: "small",
      sx: {
        color: "text.secondary"
      },
      children: t("common.none")
    });
  }
  const {
    text,
    link
  } = (0, _util.getTxLink)(method, details);
  if (link && text) {
    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Link, {
      href: link,
      target: "_blank",
      rel: "noopener noreferrer",
      children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(Root, {
        direction: "row",
        alignItems: "center",
        justifyContent: align === "left" ? "flex-start" : "flex-end",
        sx: {
          color: "text.link"
        },
        spacing: 1,
        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
          className: "tx-link-text",
          component: "span",
          sx: {
            color: "text.link"
          },
          children: text.length > 40 ? [text.slice(0, 6), text.slice(-6)].join("...") : text
        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.OpenInNewOutlined, {
          fontSize: "small",
          sx: {
            width: size,
            height: size
          }
        })]
      })
    });
  }
  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
    component: "small",
    sx: {
      color: "text.secondary"
    },
    children: t("common.none")
  });
}
const Root = (0, _system.styled)(_material.Stack)`
  @media (max-width: 600px) {
    svg.MuiSvgIcon-root {
      display: none !important;
    }
  }
`;