import PropTypes from 'prop-types';
import { getImagePath } from '@abtnode/util/lib/notification-preview/util';
import { useTheme, Box, Link } from '@mui/material';
import Img from '@arcblock/ux/lib/Img';
import { getProxyImageUrl } from '../utils';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function LinkPreviewPage({
  attachment
}) {
  const {
    data
  } = attachment;
  const theme = useTheme();
  let host = '';
  try {
    const url = new URL(data.url);
    host = url.host;
  } catch (error) {
    host = data.url;
  }
  return /*#__PURE__*/_jsxs(Link, {
    target: "_blank",
    rel: "noopener noreferrer",
    href: data.url,
    className: "link",
    style: {
      wordBreak: 'break-all'
    },
    onClick: e => {
      e.customPreventRedirect = true;
    },
    children: [!!host && /*#__PURE__*/_jsx("span", {
      className: "url",
      children: host
    }), !!data.title && /*#__PURE__*/_jsx(Box, {
      className: "title",
      style: {
        whiteSpace: 'unset'
      },
      children: data.title
    }), !!data.description && /*#__PURE__*/_jsx(Box, {
      className: "description",
      style: {
        whiteSpace: 'unset',
        color: theme.palette.text.secondary
      },
      children: data.description
    }), !!data.image && /*#__PURE__*/_jsx(Img, {
      src: getImagePath(data.image),
      alt: data.title || '',
      height: 128,
      style: {
        borderRadius: '8px',
        maxWidth: '256px',
        objectFit: 'cover'
      },
      fallback: getProxyImageUrl(getImagePath(data.image))
    })]
  });
}
LinkPreviewPage.propTypes = {
  attachment: PropTypes.object.isRequired
};
export default LinkPreviewPage;