import { useState } from "react";
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 Toolbar from "@mui/material/Toolbar";
import RconView from "./RconView.jsx";

export function useRconDialog(isOpen = false) {
  const [open, setOpen] = useState(isOpen);
  const dialogToggle = () => setOpen(!open);
  return [open, dialogToggle];
}

export default function RconDialog(props) {
  const { serverName, open, dialogToggle } = props;
  const theme = useTheme();
  const fullScreen = useMediaQuery(theme.breakpoints.down("sm"));
  return (
    <Dialog
      sx={
        fullScreen
          ? {}
          : { "& .MuiDialog-paper": { width: "80%", maxHeight: 525 } }
      }
      maxWidth="xs"
      open={open}
      fullScreen={fullScreen}
    >
      <Toolbar sx={{ display: { sm: "none" } }} />
      <DialogTitle>RCON - {serverName}</DialogTitle>
      <DialogContent>
        <RconView serverName={serverName} />
      </DialogContent>
      <DialogActions>
        <Button autoFocus onClick={dialogToggle}>
          Close
        </Button>
      </DialogActions>
    </Dialog>
  );
}