import Modal from '@mui/material/Modal';
import styled from '@emotion/styled';
import NFTDisplay, { getNFTData } from '.';

export interface NftInfo {
  address: string;
  data: Record<string, any>;
  display: Record<string, any>;
  issuer: string;
}

export default function NftPreview({
  visible,
  onClose,
  nft,
}: {
  visible: boolean;
  onClose: () => void;
  nft: NftInfo | null;
}) {
  if (!visible || !nft) {
    return null;
  }

  return (
    <NftPreviewRoot>
      {/* Preview Modal */}
      <Modal open={visible} onClose={onClose}>
        <ModalRoot onClick={onClose}>
          <NFTDisplay data={getNFTData(nft)} address={nft.address} inset />
        </ModalRoot>
      </Modal>
    </NftPreviewRoot>
  );
}

const NftPreviewRoot = styled.div`
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;

  &:hover {
    .mask {
      opacity: 1;
    }
  }

  .mask {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity 0.2s;
  }
`;

const ModalRoot = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;

  img,
  object {
    max-width: 90vw;
    max-height: 75vh;
  }

  .nft-display--inset {
    > .MuiBox-root,
    .nft-display__loading {
      width: 75vmin;
      height: 75vmin;
    }
  }
`;
