import * as React from "react";
import AppBar from "@mui/material/AppBar";
import Box from "@mui/material/Box";
import CssBaseline from "@mui/material/CssBaseline";
import Divider from "@mui/material/Divider";
import Drawer from "@mui/material/Drawer";
import IconButton from "@mui/material/IconButton";
import InboxIcon from "@mui/icons-material/MoveToInbox";
import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@mui/material/ListItemText";
import MailIcon from "@mui/icons-material/Mail";
import MenuIcon from "@mui/icons-material/Menu";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
import {
  FormControl,
  InputAdornment,
  InputLabel,
  MenuItem,
  Select,
  TextField,
} from "@mui/material";
import Grid from "@mui/material/Grid";
import Container from "@mui/material/Container";
import Paper from "@mui/material/Paper";
import CheckIcon from "@mui/icons-material/Check";
import TypeTable from "../../components/tables/TypeTable";
import SignTable from "../../components/tables/SignTable";
import Button from "@mui/material/Button";
import EmailForm from "../../components/EmailForm";

function SettingsNewEmail() {
  const [type, setType] = React.useState("");

  const handleChange = (event) => {
    setType(event.target.value);
  };

  const selectField = (
    <Box sx={{ width: "50%" }}>
      <FormControl fullWidth>
        <InputLabel id="type-select">Type</InputLabel>
        <Select
          labelId="type-select-label"
          id="type-select"
          value={type}
          label="Type"
          onChange={handleChange}
        >
          <MenuItem value={1}>Non-phishing</MenuItem>
          <MenuItem value={2}>Spear</MenuItem>
          <MenuItem value={3}>Whale</MenuItem>
        </Select>
      </FormControl>
    </Box>
  );
  return <EmailForm />;
  // return (
  //   <Box>
  //     {["Subject:", "To:", "From:", "Cc:", "Reply-to:"].map((text, index) => (
  //       <Box
  //         sx={{
  //           display: "flex",
  //           alignItems: "center",
  //           mt: "20px",
  //           ml: "15px"
  //         }}
  //       >
  //         <Box textAlign="right" sx={{ width: "20%", pr: "2em" }}>{text}</Box>
  //
  //         <Box sx={{ width: {xs: "70%", md: "50%" } }}>
  //           <TextField fullWidth />
  //         </Box>
  //
  //       </Box>
  //     ))}
  //     {selectField}
  //     <Box
  //         sx={{
  //           display: "flex",
  //           alignItems: "center",
  //           mt: "20px",
  //           ml: "15px"
  //         }}
  //       >
  //         <Box textAlign="right" sx={{ width: "20%", pr: "2em" }}>Content: </Box>
  //
  //         <Box sx={{ width: {xs: "70%", md: "50%" } }}>
  //           <TextField fullWidth multiline />
  //         </Box>
  //
  //       </Box>
  //     <Box
  //         sx={{
  //           display: "flex",
  //           alignItems: "center",
  //           justifyContent: "center",
  //           mt: "35px"
  //         }}
  //       >
  //       <Button variant="contained">create</Button>
  //     </Box>
  //   </Box>
  // );
}

export default SettingsNewEmail;
