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 List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import ListItemButton from "@mui/material/ListItemButton";
import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@mui/material/ListItemText";
import Divider from "@mui/material/Divider";
import TableViewIcon from "@mui/icons-material/TableView";
import SchemaIcon from "@mui/icons-material/Schema";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import Paper from "@mui/material/Paper";
import CircularProgress from "@mui/material/CircularProgress";

import { useRecoilValue } from "recoil";
import { tablesState, columnsDictState } from "@/recoil/atoms";
import type { ColumnInfo } from "@/pages/api/tables/[tableName]/columns";

export default function TableSchemaDialog(props: {
  open: boolean;
  setOpen: (open: boolean) => void;
  errorMsg?: string | null;
}) {
  const { open, setOpen, errorMsg } = props;
  const [selectedTableName, setSelectedTableName] = React.useState("");

  const tables = useRecoilValue(tablesState);
  const columnsDict = useRecoilValue(columnsDictState);

  const handleClickTable = (name: string) => () => setSelectedTableName(name);

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

  React.useEffect(() => {
    if (tables?.length) {
      setSelectedTableName(tables[0].tableName);
    }
  }, [tables]);

  return (
    <>
      <Dialog
        open={open}
        onClose={handleClose}
        maxWidth="lg"
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-description"
      >
        <DialogTitle id="alert-dialog-title">Table Structure</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> */}
          <Box
            sx={{
              display: "flex",
              gap: "1rem",
            }}
          >
            {!tables && !columnsDict && <CircularProgress />}
            {tables && (
              <>
                <List dense>
                  {tables.map((table) => (
                    <ListItem key={table.tableName} dense disablePadding>
                      <ListItemButton
                        selected={selectedTableName === table.tableName}
                        onClick={handleClickTable(table.tableName)}
                      >
                        <ListItemIcon>
                          <TableViewIcon />
                        </ListItemIcon>
                        <ListItemText primary={table.tableName} />
                      </ListItemButton>
                    </ListItem>
                  ))}
                </List>
              </>
            )}
            {columnsDict && columnsDict[selectedTableName] && (
              <Box>
                {!columnsDict && <CircularProgress />}
                <ColumnsTable rows={columnsDict[selectedTableName]} />
              </Box>
            )}
          </Box>
          <Typography variant="body2" color="error" component="div">
            {errorMsg}
          </Typography>
        </DialogContent>
        <DialogActions>
          {/* <Button onClick={handleClose}>Disagree</Button> */}
          <Button onClick={handleClose} autoFocus>
            Close
          </Button>
        </DialogActions>
      </Dialog>
    </>
  );
}

export function ColumnsTable(props: { rows: ColumnInfo[] }) {
  const { rows } = props;

  return (
    <>
      <TableContainer
        sx={{
          width: 800,
          height: 400,
          overflowX: "auto",
        }}
      >
        <Table aria-label="simple table">
          <TableHead>
            <TableRow>
              <TableCell>columnName</TableCell>
              <TableCell align="right">isNullable</TableCell>
              <TableCell align="right">columnType</TableCell>
              <TableCell align="right">columnKey</TableCell>
              <TableCell align="right">columnComment</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {rows.map((row) => (
              <TableRow
                key={row.columnName}
                sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
              >
                <TableCell component="th" scope="row">
                  {row.columnName}
                </TableCell>
                <TableCell align="right">{row.isNullable}</TableCell>
                <TableCell align="right">{row.columnType}</TableCell>
                <TableCell align="right">{row.columnKey}</TableCell>
                <TableCell align="right">{row.columnComment}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
    </>
  );
}