import { Box, Button, IconButton, useTheme } from "@mui/material";
import { useState } from "react";
import { defaultSettings } from "../../lib/settings";
import { FloatingDialog } from "../Generic/FloatingDialog";
import { BugReportOutlined } from "@mui/icons-material";
import { pgClient } from "../../lib/postgresql";

export const Testing = () => {
  // contexts
  const theme = useTheme();

  // states
  const [openState, setOpenState] = useState(false);
  const [maximisedState, setMaximisedState] = useState(false);

  // functions
  const close = () => setOpenState(false);

  return (
    <FloatingDialog
      body={
        <Box
          sx={{
            border: "1px solid " + theme.palette.grey[700],
            borderRadius: defaultSettings.style.radius + "px",
            display: "flex",
            flexDirection: "column",
            flexGrow: 1,
            my: 2,
            overflow: "hidden",
            p: 0,
          }}
        >
          <Button
            onClick={() => {
              const asdf = pgClient;
            }}
          >
            connect to pg
          </Button>
        </Box>
      }
      close={close}
      maximisedState={maximisedState}
      openButton={
        <IconButton onClick={() => setOpenState(true)} size="small">
          <BugReportOutlined />
        </IconButton>
      }
      openState={openState}
      setMaximisedState={setMaximisedState}
      title="Testing"
    />
  );
};
