import { useState } from 'react';
import { string } from 'prop-types';
import { Dialog, DialogContent, IconButton } from '@mui/material';
import CloseOutlinedIcon from '@mui/icons-material/CloseOutlined';
import { DIDSpaceDefaultNFT } from '@blocklet/did-space-react';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
function PreviewSpaceNft({
  src,
  width = '58px',
  height = '58px'
}) {
  const [open, setOpen] = useState(false);
  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsxs("div", {
      style: {
        position: 'relative'
      },
      onClick: handleOpen,
      children: [/*#__PURE__*/_jsx("object", {
        data: src,
        width: width,
        height: height,
        children: /*#__PURE__*/_jsx(DIDSpaceDefaultNFT, {
          style: {
            cursor: 'pointer',
            width: '64px',
            height: '64px'
          }
        })
      }), /*#__PURE__*/_jsx("div", {
        style: {
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%',
          height: '100%',
          zIndex: '1',
          cursor: 'pointer'
        },
        onClick: handleOpen
      })]
    }), /*#__PURE__*/_jsx(Dialog, {
      open: open,
      onClose: handleClose,
      "aria-labelledby": "preview-space-nft-display",
      "aria-describedby": "preview space nft display",
      fullWidth: true,
      maxWidth: "md",
      children: /*#__PURE__*/_jsxs(DialogContent, {
        style: {
          padding: '8px 8px',
          backgroundColor: 'rgba(0,0,0,0.8)'
        },
        children: [/*#__PURE__*/_jsx(IconButton, {
          color: "inherit",
          onClick: handleClose,
          "aria-label": "close",
          style: {
            position: 'absolute',
            top: 8,
            right: 8,
            color: 'white'
          },
          children: /*#__PURE__*/_jsx(CloseOutlinedIcon, {})
        }), "(", /*#__PURE__*/_jsx("object", {
          data: src,
          style: {
            width: '100%',
            height: '75vh',
            objectFit: 'contain'
          },
          children: /*#__PURE__*/_jsx(DIDSpaceDefaultNFT, {
            style: {
              width: '100%',
              height: '75vh'
            }
          })
        }), ")"]
      })
    })]
  });
}
PreviewSpaceNft.propTypes = {
  src: string.isRequired,
  width: string,
  height: string
};
export default PreviewSpaceNft;