import * as React from "react";
import { styled } from "@mui/material/styles";
import Box from "@mui/material/Box";
import Card from "@mui/material/Card";
import CardActions from "@mui/material/CardActions";
import CardContent from "@mui/material/CardContent";
import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";
import Stack from "@mui/material/Stack";
import NorthEastIcon from "@mui/icons-material/NorthEast";
import Dialog from "@mui/material/Dialog";
import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent";
import DialogContentText from "@mui/material/DialogContentText";
import DialogTitle from "@mui/material/DialogTitle";

import ExplainTable from "@/components/Table/ExplainTable";

export function CheckMoreBtn(props: {
  children: React.ReactNode;
  onClick: () => void;
}) {
  const { children, onClick } = props;

  return (
    <Button
      endIcon={<NorthEastIcon />}
      variant="text"
      onClick={onClick}
      sx={{
        my: (theme) => theme.spacing(2),
        margin: "0 !important",
      }}
    >
      {children}
    </Button>
  );
}

export default function SQLExecutionPlanDialog(props: {
  data: { [x: string]: string }[];
}) {
  const { data } = props;

  const [open, setOpen] = React.useState(false);

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <>
      <CheckMoreBtn onClick={handleClickOpen}>
        Check the full execution plan
      </CheckMoreBtn>
      <Dialog
        open={open}
        onClose={handleClose}
        maxWidth="lg"
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-description"
      >
        <DialogTitle id="alert-dialog-title">Execution plan</DialogTitle>
        <DialogContent>
          {/* <DialogContentText id="alert-dialog-description">
            Let Google help apps determine location. This means sending
            anonymous location data to Google, even when no apps are running.
          </DialogContentText> */}
          <ExplainTable data={data} />
        </DialogContent>
        <DialogActions>
          {/* <Button onClick={handleClose}>Disagree</Button> */}
          <Button onClick={handleClose} autoFocus>
            Close
          </Button>
        </DialogActions>
      </Dialog>
    </>
  );
}