import { useState, useContext, useEffect } from "react";
import StoreContext from "@qltr/store";

import useMediaQuery from "@mui/material/useMediaQuery";
import { useTheme } from "@mui/material/styles";
import Button from "@mui/material/Button";
import DialogTitle from "@mui/material/DialogTitle";
import DialogContent from "@mui/material/DialogContent";
import DialogActions from "@mui/material/DialogActions";
import Dialog from "@mui/material/Dialog";
import TextField from "@mui/material/TextField";
import Toolbar from "@mui/material/Toolbar";

export default function SilenceDialog(props) {
  const { silence, open, onClose } = props;
  const theme = useTheme();
  const fullScreen = useMediaQuery(theme.breakpoints.down("sm"));
  const [silenceEntry, setSilenceEntry] = useState(silence);

  useEffect(() => {
    setSilenceEntry(silence);
  }, [silence, open]);

  const { state: store, updateStore } = useContext(StoreContext);

  const handleCancel = () => onClose();

  const handleOk = () => onClose(silenceEntry);

  const updateSilence = (silenceType) => (e) => {
    silenceEntry[silenceType] = e.target.value;
    setSilenceEntry({ ...silenceEntry });
  };

  return (
    <Dialog
      sx={
        fullScreen
          ? {}
          : { "& .MuiDialog-paper": { width: "80%", maxHeight: 435 } }
      }
      maxWidth="xs"
      open={open}
      fullScreen={fullScreen}
    >
      <Toolbar sx={{ display: { sm: "none" } }} />
      <DialogTitle>Silence Alert</DialogTitle>
      <DialogContent>
        <TextField
          fullWidth
          label="Test Name"
          variant="standard"
          defaultValue={silence.name ?? ""}
          onChange={updateSilence("name")}
          margin="normal"
        />
        <TextField
          fullWidth
          label="Test Method"
          variant="standard"
          defaultValue={silence.method ?? ""}
          onChange={updateSilence("method")}
          margin="normal"
        />
        <TextField
          fullWidth
          label="Test Class"
          variant="standard"
          defaultValue={silence.class ?? ""}
          onChange={updateSilence("class")}
          margin="normal"
        />
      </DialogContent>
      <DialogActions>
        <Button autoFocus onClick={handleCancel}>
          Cancel
        </Button>
        <Button onClick={handleOk}>Ok</Button>
      </DialogActions>
    </Dialog>
  );
}
