import { Box, Typography, useTheme } from '@mui/material';
import PropTypes from 'prop-types';
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";
AssetPreview.propTypes = {
  locale: PropTypes.string,
  data: PropTypes.object.isRequired,
  type: PropTypes.oneOf(['asset', 'vc'])
};
function AssetPreview({
  locale = 'en',
  data,
  type = 'asset'
}) {
  const title = {
    zh: '接收',
    en: 'Received'
  }[locale] || 'Received';
  const from = {
    zh: '来自',
    en: 'from'
  }[locale] || 'from';
  const chainHost = getUrlHost(data.chainHost) || getChainHost(data.chainId);
  const did = data.did || data?.credential?.issuer?.id || ''; // asset || vc
  const url = `https://${chainHost}/explorer/assets/${did}`;
  const theme = useTheme();
  const isDark = theme.palette.mode === 'dark';
  const sx = useCreation(() => ({
    display: 'flex',
    alignItems: 'center',
    rowGap: 2,
    columnGap: 4,
    justifyContent: 'space-between',
    flexWrap: 'wrap'
  }));
  return /*#__PURE__*/_jsx(Box, {
    sx: {
      pr: 1
    },
    children: /*#__PURE__*/_jsx("a", {
      href: url,
      target: "_blank",
      style: {
        textDecoration: 'none',
        color: 'initial',
        display: 'block'
      },
      onClick: e => {
        if (type === 'vc') {
          e.preventDefault();
          return;
        }
        e.customPreventRedirect = true;
      },
      rel: "noreferrer",
      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: 'text.primary'
            },
            children: title
          }), /*#__PURE__*/_jsx(Typography, {
            component: "div",
            align: "right",
            style: mergeDarkStyle(summaryStyle, isDark),
            children: "+1 Asset"
          })]
        }), did ? /*#__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: did,
              showQrcode: true,
              copyable: true,
              compact: true,
              responsive: true,
              locale: locale
            })
          })]
        }) : null]
      })
    })
  });
}
export default AssetPreview;