import React from "react";
import { Button, Container, CssBaseline, Grid, Typography } from "@material-ui/core";
import { DropzoneAreaBase } from "material-ui-dropzone";
import { useUserContext }  from "../Contexts/UserContext";
import { useFileUploadContext, FileUploadProvider }  from "../Contexts/FileUploadContext";
import ModalProgressBar from "../ModalProgressBar";
import useStyles from "../Styles";

const FileUploadZone = ({ classes }) => {
  const { uploading, progress, status, linkURL, upload, cancel } = useFileUploadContext();

  return (
    <form className={classes.form} noValidate>
      <DropzoneAreaBase 
        maxFileSize={5e+7}
        showAlerts={false}
        onAdd={upload}
      />
      <ModalProgressBar uploading={uploading} progress={progress} onCancel={cancel} status={status} linkURL={linkURL} />
    </form>
  );
};

export default function FileUploadForm() {
    const { signOut } = useUserContext();
    const classes = useStyles();

    return (
      <Container component="main" maxWidth="xs">
        <CssBaseline />
        <div className={classes.paper}>
          <Typography component="h1" variant="h5">
            Upload file
          </Typography>
          <FileUploadProvider>
            <FileUploadZone classes={classes} />
          </FileUploadProvider>
          <Grid container>
            <Grid item >
              <Button onClick={signOut}>Sign Out</Button>
            </Grid>
          </Grid>
        </div>
      </Container>
    );
  }