import Button from "@material-ui/core/Button";
import Dialog from "@material-ui/core/Dialog";
import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogContentText from "@material-ui/core/DialogContentText";
import DialogTitle from "@material-ui/core/DialogTitle";
import { makeStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
import FormHelperText from "@material-ui/core/FormHelperText";
import React, { useState } from "react";
import axios from "axios";

const useStyles = makeStyles((theme) => ({
  formControl: {
    marginTop: theme.spacing(1),
    minWidth: 600,
  },
  dialogControl: {
    margin: theme.spacing(0),
    marginTop: theme.spacing(1),
    minWidth: 800,
  },
  dialogTitle: {
    paddingBottom: theme.spacing(0),
  },
  errorMsg: {
    paddingTop: theme.spacing(1),
  },
}));

export default function CreateNewCymngCase(props) {
  const classes = useStyles();

  const [open, setOpen] = useState(true);
  const [name, setName] = React.useState("");
  const [description, setDescription] = useState("");
  const [isError, setIsError] = useState("");

  const handleSubmit = () => {
    axios
      .post("", {
        name: { name },
        description: { description },
      })
      .then(() => {
        handleClose();
      })
      .catch(() => {
        setIsError(true);
      });
  };

  const handleClose = () => {
    if (props.close()) props.close();
    setOpen(false);
  };

  return (
    <div>
      <Dialog
        open={open}
        className={classes.dialogControl}
        onClose={handleClose}
      >
        <DialogTitle className={classes.dialogTitle}>
          Create New Case
        </DialogTitle>
        <DialogContent className={classes.formControl}>
          <DialogContentText>
            Please enter new Cymng Case information
          </DialogContentText>
          <TextField
            autoFocus
            margin="dense"
            label="Name"
            type="text"
            fullWidth
            onChange={(event) => setName(event.target.value)}
          />
          <TextField
            margin="dense"
            label="Description"
            type="text"
            fullWidth
            onChange={(event) => setDescription(event.target.value)}
          />
          {isError && (
            <FormHelperText className={classes.errorMsg}>
              Oops something went Wrong
            </FormHelperText>
          )}
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose} color="primary">
            Cancel
          </Button>
          <Button onClick={handleSubmit} color="primary">
            Submit
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}