import { useEffect } from "react";
import { Button, makeStyles, Dialog, DialogTitle, DialogContent, DialogActions, Typography } from "@material-ui/core";
import { CodeSnippet } from "../../shared/components/CodeSnippet";
import { analytics } from "../../shared/utils/analyticsUtils";
import { Alert } from "@material-ui/lab";
import { useSelectedWalletFromStorage } from "../../shared/utils/walletUtils";

const useStyles = makeStyles((theme) => ({
  label: {
    fontWeight: "bold"
  },
  dialogContent: {
    padding: "1rem"
  }
}));

export function ExportCertificate(props) {
  const classes = useStyles();
  const selectedWallet = useSelectedWalletFromStorage();

  useEffect(() => {
    async function init() {
      await analytics.event("deploy", "export certificate");
    }

    init();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <Dialog open={props.isOpen} onClose={props.onClose} maxWidth="sm" fullWidth>
      <DialogTitle>Export certificate</DialogTitle>
      <DialogContent dividers className={classes.dialogContent}>
        {selectedWallet && selectedWallet.cert && selectedWallet.certKey ? (
          <>
            <Typography variant="body1" className={classes.label}>
              Cert
            </Typography>
            <CodeSnippet code={selectedWallet.cert} />
            <Typography variant="body1" className={classes.label}>
              Key
            </Typography>
            <CodeSnippet code={selectedWallet.certKey} />
          </>
        ) : (
          <Alert severity="warning">
            Unable to find local certificate. Meaning you have a certificate on chain but not in the tool. We suggest you regenerate a new one to be able to use
            the tool properly.
          </Alert>
        )}
      </DialogContent>
      <DialogActions>
        <Button variant="contained" color="primary" onClick={props.onClose}>
          Close
        </Button>
      </DialogActions>
    </Dialog>
  );
}