import React from "react";
import Modal from "@material-ui/core/Modal";

import { Button, LinearProgress } from "@material-ui/core";
import { useFileUploadContext } from "../Contexts/FileUploadContext";

const getModalStyle = () => {
  const top = 30;
  const left = 50;

  return {
    width: `350px`,
    top: `${top}%`,
    left: `${left}%`,
    transform: `translate(-${left}%, -${top}%)`,
    backgroundColor: `white`,
    border: `none`,
    position: `absolute`,
    margin: `1em`,
    padding: `1em`,
    textAlign: `center`,
  };
};

const ModalProgressBar = () => {
  const {
    uploading,
    progress,
    status,
    linkURL,
    cancel,
  } = useFileUploadContext();

  const modalStyle = getModalStyle();
  const onClickCancel = cancel;

  return (
    <Modal open={uploading}>
      <div style={modalStyle}>
        {status && <p>{status}</p>}
        {linkURL && (
          <p>
            <a href={linkURL} target="_blank" rel="noreferrer">
              View
            </a>
          </p>
        )}
        <LinearProgress variant="determinate" value={progress} />
        <Button onClick={onClickCancel}>
          {progress === 100 || progress === -1 ? "Done" : "Cancel"}
        </Button>
      </div>
    </Modal>
  );
};

export default ModalProgressBar;