import PropTypes from 'prop-types';
import { Box, Typography, useTheme } from '@mui/material';
import { getChainHost, getUrlHost } from '@abtnode/util/lib/notification-preview/chain';
import { remarkStyle, summaryStyle } from '@abtnode/util/lib/notification-preview/style';
import DID from '@arcblock/ux/lib/DID';
import { useCreation } from 'ahooks';
import { mergeDarkStyle } from '../utils';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
TokenPreview.propTypes = {
  locale: PropTypes.string,
  data: PropTypes.object.isRequired
};
function TokenPreview({
  locale = 'en',
  data
}) {
  const from = {
    zh: '来自',
    en: 'from'
  }[locale] || 'from';
  const title = {
    zh: '接收',
    en: 'Received'
  }[locale] || 'Received';
  const chainHost = getUrlHost(data.chainHost) || getChainHost(data.chainId);
  const url = `https://${chainHost}/explorer/tokens/${data.address}/tx`;
  const theme = useTheme();
  const isDark = theme.palette.mode === 'dark';
  let v = data.amount;
  if (data.decimal) {
    v = data.amount / 10 ** data.decimal;
  }
  const sx = useCreation(() => ({
    display: 'flex',
    alignItems: 'center',
    rowGap: 2,
    columnGap: 4,
    justifyContent: 'space-between',
    flexWrap: 'wrap'
  }));
  return /*#__PURE__*/_jsx("a", {
    href: url,
    target: "_blank",
    rel: "noreferrer",
    onClick: e => {
      e.customPreventRedirect = true;
    },
    children: /*#__PURE__*/_jsxs(Box, {
      sx: {
        display: 'flex',
        flexDirection: 'column'
      },
      children: [/*#__PURE__*/_jsxs(Box, {
        sx: sx,
        children: [/*#__PURE__*/_jsx(Typography, {
          component: "div",
          sx: {
            fontWeight: 700,
            color: theme.palette.text.primary
          },
          children: title
        }), /*#__PURE__*/_jsxs(Typography, {
          component: "div",
          align: "right",
          style: mergeDarkStyle(summaryStyle, isDark),
          sx: {
            flex: 1
          },
          children: ["+", v, " ", data.symbol]
        })]
      }), /*#__PURE__*/_jsxs(Box, {
        sx: sx,
        children: [/*#__PURE__*/_jsx(Typography, {
          component: "div",
          style: mergeDarkStyle({
            ...remarkStyle,
            fontSize: 14
          }, isDark),
          children: from
        }), /*#__PURE__*/_jsx(Box, {
          sx: {
            maxWidth: 260,
            fontSize: 14
          },
          children: /*#__PURE__*/_jsx(DID, {
            did: data.address,
            showQrcode: true,
            copyable: true,
            compact: true,
            responsive: true,
            locale: locale
          })
        })]
      })]
    })
  });
}
export default TokenPreview;