import { useState } from 'react';
import PropTypes from 'prop-types';
import get from 'lodash/get';
import Popover from '@mui/material/Popover';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import Typography from '@mui/material/Typography';
import VerifiedUserIcon from '@mui/icons-material/VerifiedUser';
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import { formatToDate } from './util';
import { useNodeContext } from './contexts/node';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
export default function Certificate({
  certificate = {}
}) {
  const [anchorEl, setAnchorEl] = useState(null);
  const node = useNodeContext();
  const {
    t,
    locale
  } = useLocaleContext();
  const handlePopoverOpen = event => {
    setAnchorEl(event.currentTarget);
  };
  const handlePopoverClose = () => {
    setAnchorEl(null);
  };
  const open = Boolean(anchorEl);
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsx(VerifiedUserIcon, {
      "aria-owns": open ? 'mouse-over-popover' : undefined,
      onMouseEnter: handlePopoverOpen,
      onMouseLeave: handlePopoverClose,
      style: {
        color: '#44cdc6',
        fontSize: '1em',
        cursor: 'pointer'
      }
    }), /*#__PURE__*/_jsx(Popover, {
      id: "mouse-over-popover",
      style: {
        pointerEvents: 'none'
      },
      open: open,
      anchorEl: anchorEl,
      anchorOrigin: {
        vertical: 'bottom',
        horizontal: 'left'
      },
      transformOrigin: {
        vertical: 'top',
        horizontal: 'left'
      },
      onClose: handlePopoverClose,
      disableRestoreFocus: true,
      children: /*#__PURE__*/_jsx(Card, {
        children: /*#__PURE__*/_jsxs(CardContent, {
          style: {
            display: 'flex'
          },
          children: [/*#__PURE__*/_jsx("div", {
            children: /*#__PURE__*/_jsx("img", {
              src: `${node.imgPrefix}/https-certificate-icon.png`,
              alt: "certificate icon",
              style: {
                maxHeight: '100%',
                maxWidth: '100%'
              }
            })
          }), /*#__PURE__*/_jsxs(Typography, {
            component: "div",
            style: {
              marginLeft: '16px'
            },
            children: [/*#__PURE__*/_jsx(Typography, {
              component: "div",
              style: {
                fontWeight: 'bold'
              },
              children: certificate.domain
            }), /*#__PURE__*/_jsx(Typography, {
              component: "div",
              children: `${t('common.issuer')}: ${get(certificate, 'issuer.commonName', '')}`
            }), /*#__PURE__*/_jsx(Typography, {
              component: "div",
              children: `${t('router.cert.issuedOn')}: ${formatToDate(certificate.validFrom, locale)}`
            }), /*#__PURE__*/_jsx(Typography, {
              component: "div",
              children: `${t('router.cert.expiryOn')}: ${formatToDate(certificate.validTo, locale)}`
            })]
          })]
        })
      })
    })]
  });
}
Certificate.propTypes = {
  certificate: PropTypes.object
};