import { Button } from "@material-ui/core";
import React from "react";

import DownloadFileLink from "../../Controls/DownloadFileLink";
import useStyles from "../../useStyles";

const CertMimeType = "application/x-pem-file";

const DownloadCerts = ({ vin, publicCert, privateCert, onChangeView }) => {
  const classes = useStyles();

  const onNewCert = (event) => {
    event.preventDefault();
    if (!onChangeView) return;
    onChangeView();
  };
  return (
    <div>
      <h2>Download Certificates</h2>
      <ul>
        <li>
          <DownloadFileLink
            data={publicCert}
            filename={`${vin}_cert.pem`}
            mimetype={CertMimeType}
          />
        </li>
        <li>
          <DownloadFileLink
            data={privateCert}
            filename={`${vin}_key.pem`}
            mimetype={CertMimeType}
          />
        </li>
      </ul>
      <Button
        type="submit"
        fullWidth
        variant="contained"
        color="primary"
        className={classes.submit}
        onClick={onNewCert}
      >
        Done
      </Button>
    </div>
  );
};

export default DownloadCerts;