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, token }) => {
  const { upload } = useFileUploadContext();
  const { token: { accessToken: { jwtToken : authToken } } } = useUserContext();

  return (
    <form className={classes.form} noValidate>
      <DropzoneAreaBase 
        maxFileSize={5e+7}
        showAlerts={false}
        onAdd={(files) => upload(files, authToken)}
      />
      <ModalProgressBar />
    </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>
    );
  }