import * as React from "react";
import Box from "@mui/material/Box";
import EmailTable from "../../components/tables/EmailTable";
import Button from "@mui/material/Button";
import { useHistory } from "react-router";
import axios from "axios";
import Grid from "@mui/material/Grid";

// Page contains table with emails and button for creating new email
function EmailsPage() {
  const history = useHistory();

  const showFile = async (e) => {
    e.preventDefault();

    const reader = new FileReader();
    reader.onload = async (e) => {
      const text = e.target.result;
      await axios.post("http://localhost:8000/email/parse", { text: text });
    };
    reader.readAsText(e.target.files[0]);
  };

  return (
    <Box>
      <Grid container mt={5} columnSpacing={4}>
        <Grid item container xs={6} justifyContent="right">
          <Button
            variant="contained"
            onClick={(e) => history.push("emails/create")}
          >
            Add
          </Button>
        </Grid>
        <Grid item container xs={6} justifyContent="left">
          <Button
            variant="contained"
            onClick={(e) => history.push("emails/import")}
          >
            Import
          </Button>
        </Grid>
      </Grid>
      <EmailTable />
    </Box>
  );
}

export default EmailsPage;
