import { BugReportOutlined } from "@mui/icons-material";
import { Box, Button, IconButton, useTheme } from "@mui/material";
import { fetch } from "@tauri-apps/plugin-http";
import { useAtom } from "jotai";
import { useState } from "react";
import { serverUrlAtom } from "../../lib/jotai";
import { defaultSettings } from "../../lib/settings";
import { FloatingDialog } from "../Generic/FloatingDialog";

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

  // atoms
  const [serverUrl, setServerUrl] = useAtom(serverUrlAtom);

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

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

  const testing = () => {
    fetch(serverUrl + "/nuke-db").then((response) => {
      console.log(response);
    });
    fetch(serverUrl + "/setup-demo-db").then((response) => {
      console.log(response);
    });
  };

  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,
          }}
        >
          <Box>
            <Button
              onClick={() => {
                testing();
              }}
            >
              test
            </Button>
          </Box>
        </Box>
      }
      close={close}
      maximisedState={maximisedState}
      openButton={
        <IconButton
          onClick={() => setOpenState(true)}
          size="small"
        >
          <BugReportOutlined />
        </IconButton>
      }
      openState={openState}
      setMaximisedState={setMaximisedState}
      title="Testing"
    />
  );
};